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

常用漢字筆順辞典読み方がわからない漢字を手書きで調べれるiPhoneアプリ「常用漢字筆順辞典」前のページ

クロスブラウザ対応の軽量なカラーピッカー実装のjQueryプラグイン「Tiny Colorpicker」次のページTiny Colorpicker

関連記事

  1. Custom Carousel

    JavaScript

    カードスタイルのカルーセル・スライダー実装「Custom Carousel」

    Custom Carouselはカードスタイルによるシンプルなカルーセ…

  2. quick-select

    JavaScript

    素早く簡単に選択できるセレクトボックス「quick-select」

    quick-selectは素早く簡単に選択可能なセレクトボックスを実装…

  3. Slideout.js

    JavaScript

    軽量でタッチスライド対応のサイドメニュー・Slideout.js

    Slideout.jsは軽量でスマフォでのタッチスライドに対応したサイ…

  4. JavaScript

    縦スクロールすると横スクロール(水平移動)していくjQueryプラグイン「jInvertScroll…

    これおもしろいですね。縦スクロールすると垂直に移動していくのではなくて…

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのeachメソッドのお勉強

    今回はjQueryのeachメソッドを使ってみました。なんかとても便利…

最近の記事

  1. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  2. ペットボトルホルスター

アーカイブ

PAGE TOP