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

no-image超シンプルでオプションもわかりやすいjQueryスライダー「Free Simple Slider」前のページ

軽量でシンプルなコンテキストメニューを実装できる「jQuery Context Menu」次のページjQuery Context Menu

関連記事

  1. JavaScript

    巻き簾のようにメニューを開閉するアニメーションを実装できるjQueryプラグイン「Makisu」

    巻き簾のようにリスト化した要素を1つずつ開いていったり閉じていったりで…

  2. Intense Images
  3. BeefUp

    JavaScript

    多彩なカスタマイズができるjQueryアコーディオンプラグイン「BeefUp」

    BeefUpは多彩なカスタマイズができるレスポンシブに対応したjQue…

  4. no-image

    JavaScript

    Bootstrap 4を使ったステッパープラグイン「bs-stepper」

    bs-stepperはBootstrap 4を使ったステッパーを実装で…

  5. no-image

    JavaScript

    シンプルでベーシックなJavaScriptによるlightbox実装「halkaBox.js」

    halkaBox.jsは、シンプルでベーシックなJavaScriptに…

  6. no-image

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP