ホームページ > ウェブフロントエンド > jsチュートリアル > js操作スクロールバーイベント例_javascriptスキル

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

WBOY
リリース: 2016-05-16 16:17:03
オリジナル
1091 人が閲覧しました

この記事の例では、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 プログラミング設計に役立つことを願っています。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート