scroll-scope.js

JavaScript

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

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

scroll-scope.js

scroll-scope.js

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

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

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

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

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

Responsive Multi Menuモバイルデバイスにも最適化されたナビゲーション実装「Responsive Multi Menu」前のページ

パネルにスタッキング効果を実装できるjQueryプラグイン「StickyStack.js」次のページStickyStack.js

関連記事

  1. jQuery.mousetip

    JavaScript

    マウスの動きや位置に追従してくるツールチップを実装できる「jQuery.mousetip」

    jQuery.mousetipはマウスの動きや位置に追従してくる軽量の…

  2. no-image

    JavaScript

    クッキーバナーを手軽に作れるjQueryプラグイン「Cookie Banner JS」

    Cookie Banner JSは、Webサイト上に表示させるクッキー…

  3. VerticalShift

    JavaScript

    要素を縦長に並べてマウスオーバーで全部表示させるjQueryプラグイン「VerticalShift」…

    とても面白い見せ方だったのでご紹介します。要素を縦長に並べてマウスオー…

  4. sticky-items

    JavaScript

    HTML要素をページ上部に固定させれるjQueryプラグイン「sticky-items」

    sticky-itemsは指定したHTML要素をWebページの上部に付…

  5. JavaScript

    軽量で嬉しい!画像を拡大ズームしてくれるjQueryプラグイン「Leroy Zoom」

    Leroy ZoomというjQueryプラグインを使えば、画像を拡大ズ…

  6. 3D Portfolio Template

    JavaScript

    立体的に回転するテンプレート「3D Portfolio Template」

    滑らかに、立体的に回転するテンプレートを実装することができる「3D P…

最近の記事

  1. COMOLI 和紙コットンリストバンド
  2. スターバックス インドネシア アチェ
  3. ベーコンとほうれん草のキッシュ
  4. サンクラフト ポテトング

アーカイブ

PAGE TOP