下スクロールで表示、上スクロールで非表示の実装方法【バウンス スクロールの対処法も解説】

  • LINEで送る

こんにちは。

今日は、下へスクロールすると表示されて、
上にスクロールすると消えるというよくある実装方法をご紹介したいなと思います。

でもそれだけだと他にもコロコロ記事は転がっていると思うので、
「バウンススクロール」の対処法も書いていきたいなと思います!

では、どうぞ!


下へスクロールで表示、上にスクロールで非表示にする方法

トップへ戻るボタンやフローティングバナーとかで使用することが多い実装方法です。

$(function() {
 var before = $(window).scrollTop();
 $(window).scroll(function() {
 var after = $(window).scrollTop();
 if(before > after) {
//上スクロールした時の処理
  $('#example').removeClass('hide');
 } else if(before < after) {
//下スクロールした時の処理
      if(before >= 300 ) {
 $('#example').addClass('hide');
 }
 }
 before = after;
 });
});

参考記事▶︎ https://webdesignmagazine.net/jquery_up_down/

ここまでは結構どこにでも記述されている記事だと思います。

さてここから本題。

safariでの表示を確認するとバウンス 効果で不具合が出る。

普段クロームばかりしか見てないので気にならなかったんですが、

サファリで確認したところ厄介な現象が起きていました。

そう。。。

一番下にいったときに跳ねて表示が消えてしまうんです!!!泣

いやほんとならここで、これはサファリ特有のなので難しいです!!と言いたかった(本音)

”サファリ バウンス スクロール 無効”

などと調べて試してみても

今は動かない方法が多かったりしますよね汗

仕方がない!!強行突破!!ということで

こちらを書き加えました▼

$(window).on('scroll', function () {
var doch = $(document).innerHeight(); //ページ全体の高さ
var winh = $(window).innerHeight(); //ウィンドウの高さ
var bottom = doch - winh; //ページ全体の高さ - ウィンドウの高さ = ページの最下部位置
if (bottom <= $(window).scrollTop()) {
//一番下までスクロールした時に実行
$('#example).addClass('hide');
}
});

ページの高さを出して、一番下では常に表示させておく。

どうですか。笑

まさに強引な方法!でも理にかなっている!!

もうどうすればいいんだーーー!!となったらぜひお試しください^^

  • LINEで送る

SNSでもご購読できます。

コメントを残す

*