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. ホワイトチョコマカダミアドーナツ
  2. エッグペペ
  3. ダークチョコレート
  4. 朝のコーヒー
  5. ザンビア
PAGE TOP