jquery-scrollstop

JavaScript

スクロールの開始・終了時のイベントを設定できる「jquery-scrollstop」

jquery-scrollstopはスクロールの開始・終了時のイベントを設定することができるjQueryプラグインです。スクロール中に実行したいもの、またはスクロールされていない時に実行したいものを自由にセッティングできるのがいいですね。

jquery-scrollstop

デモ

デモではスクロールがスタートされ(スクロール中)るとテキストカラーが変更される他、画面上部に「SCROLLING PAGE」という文字が固定表示されます。

そしてスクロールをストップするとテキストカラーが変更され、「SCROLLING PAGE」という文字は非表示になります。

使い方はこんな感じでスクロール開始時と終了時に実行したい動作を設定してあげます。

$(window)
    .on("scrollstart", function() {
        $(document.body).css({background: "yellow"});
    })
    .on("scrollstop", function() {
        $(document.body).css({background: "green"});
    })

応用次第で様々な動作を加えることができそうですね。

というわけで、スクロールの開始・終了イベントを設定できる「jquery-scrollstop」のご紹介でした。

jquery-scrollstop

関連記事

  1. Responsive 3d Fold Scroll
  2. JavaScript

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

  3. Shave

    JavaScript

    設定した高さに基づいて複数行のテキストを切り取る「Shave」

    Shaveは設定した最大の高さに基づいてHTML要素内に収まるように複…

  4. jquery.matchHeight.js
  5. intence

    JavaScript

    インタラクティブなナビゲーションスクロールバーのJSライブラリ「intence」

    intenceはスクロール中のエリアが分かるインタラクティブなナビゲー…

  6. no-image

最近の記事

  1. 200-DGCAM019
  2. ハクバ GW-PRO RED フォトグローブプロ PL
  3. Soundcore Liberty Air 2
  4. Soundcore Liberty 2
  5. マザーツリー

アーカイブ

PAGE TOP