js操作スクロールバーイベント例_javascriptスキル

この記事の例では、js でスクロール バー イベントを操作する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

私はスクロール バー イベントを監視する方法をいつも疑問に思っていましたが、今日やっと理解できました。

以下のコードは、スクロール バーが移動している限り監視し、表示または非表示にするために最上位の div を返します。

window.onscroll = function () { 
  var t = document.documentElement.scrollTop || document.body.scrollTop;
  if (t > 0) { 
    $(".cbbfixed").css("bottom", "10px"); 
  } else { 
    $(".cbbfixed").css("bottom", "-85px"); 
  } 
}

注:

t: スクロールバーから上端までの距離

t>0、つまり、スクロール バーがスクロールすると、if() ステートメントがすぐに実行されます。else() のコードは、スクロール バーが一番上に達すると、一番上の div に戻って

トップに戻るボタンのクリック操作:

$("#cgotop").click(function(){ 
  $('body,html').animate({ scrollTop: 0 }, 100); 
  return false; 
});

補足:

1. 特定の要素のスクロールバーイベントを監視します

$(selector).scroll(function(){.......});

2. スクロールバーのスクロール距離を取得

$(selector).scrollTop();
$(selector).scrollLefft();

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。