scroll-scope.js

JavaScript

親要素の影響を受けずに子要素だけを固定してスクロールさせる「scroll-scope.js」

scroll-scope.jsは親要素の影響を受けずに子要素だけを固定してスクロールさせることができるjQueryプラグインです。通常、スクロールが設定されている子要素にマウスオーバーしてスクロールし続けると、子要素内のスクロールが終わったあとにそのまま親要素のスクロールに切り替わるのですが、これを防ぐことができるプラグインです。

scroll-scope.js

scroll-scope.js

例えば、スクロールがある子要素だけをじっくり見たい時なんかに、1番下もしくは1番上までスクロールした時に惰性でそのままページ全体がスクロールされてしまう、なんていうことがあるかと思います。

そんな時、また子要素を画面中央付近など見やすい位置までスクロールで戻したりしなきゃいけないので、割とめんどくさいですよね。

なので、scroll-scope.jsを使うことで子要素内にマウスオーバーした状態ならいくらスクロールしても親要素の影響を受けずボックスが固定されたままになります。

ユーザーとしてはとてもありがたい機能ですね。特定の要素内に集中して欲しい時なんかに役立つかと思います。

というわけで、ページ内で子要素のスクロールを親要素に引き継がせたくないという時には覚えておきたいjQueryプラグインです。

関連記事

  1. scrollama.js

    JavaScript

    スクロールイベントを実装できるモダンで軽量なJSライブラリ「scrollama.js」

    scrollama.jsは、スクロールイベントを実装することができるモ…

  2. no-image

    JavaScript

    サイドバーをフローティングできる「FloatSidebar.js」

    FloatSidebar.jsはサイドバーをフローティングできるVan…

  3. Grasp Mobile Progress Circle
  4. Flickerplate
  5. JavaScript

    シンプルでスタイリッシュなLightbox風のjQueryプラグイン「Featherlight」

    シンプルでスタイリッシュなデザインが特徴的なLightbox風のjQu…

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP