scrollMonitor

JavaScript

要素が表示領域に入ったり出たりするとイベントを受け取れる「scrollMonitor」

scrollMonitorは、要素が表示領域(ビューポート)に入ったり出たりすることでイベントを受け取ることができるスクリプトです。Watcher Objectsにより、要素を監視してイベントをトリガーします。

scrollMonitor

デモ

デモではナンバリングされた沢山の要素が表示されています。スクロールすると表示領域内で一番上部の列が青色で表示され、一番下部の列が黄色で表示されます。

Watcher Objectsを使用することで、要素の監視とイベントのトリガーを実現しているとのこと。ちなみに、Watcher Objectsには要素の可視性や表示領域に対する相対的な位置などを監視する要素に関する情報も含まれています。

  • DOM Element
  • Object
  • Number
  • jQuery object
  • NodeList(またはArray)
  • string

他にもさまざまなイベントやモジュールなどが用意されています。

また、scrollMonitorはとても高速に設計されているので、大量のデータを表示したい時などにはピッタリですね。コードにはVanilla JSが使われているとのこと。

要素が表示領域に入ったり出たりした時にイベントを受け取れる機能を実装したい人は、ぜひ豊富な機能と高速設計による「scrollMonitor」を使われてみてはいかがでしょうか?

scrollMonitor

関連記事

  1. PhotoSwipe

    JavaScript

    タッチジェスチャーにも対応したイメージギャラリー・PhotoSwipe

    PhotoSwipeはスマホやタブレットのタッチジェスチャーにも対応し…

  2. multi.js

    JavaScript

    検索機能がついたセレクトボックスを実装できる「multi.js」

    multi.jsは検索機能がついた使いやすいユーザーフレンドリーなセレ…

  3. table-dragger

    JavaScript

    ドラッグ&ドロップでテーブルを並べ替えられる「table-dragger」

    table-draggerはドラッグ&ドロップでテーブルの並べ替えを可…

  4. ShowMore.js

    JavaScript

    長いコンテンツを折りたためるjQueryプラグイン「ShowMore.js」

    ShowMore.jsは長いコンテンツを折りたたんで表示・非表示を簡単…

  5. JavaScript

    Lightbox風のjQueryプラグインColorBoxの使い方

    綺麗なイメージギャラリーを簡単に設置できるColorBoxの使い方の紹…

  6. Foxholder

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP