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. imgViewer2

    JavaScript

    画像のズームとパン機能を備えたjQueryプラグイン「imgViewer2」

    imgViewer2は画像のズームとパン機能を備えたjQueryプラグ…

  2. jquery.xtr

    JavaScript

    クライアントサイドで変換してくれる「jquery.xtr」

    jquery.xtrはページのリフレッシュなしにクライアントアイドでテ…

  3. jQuery Stick ‘em

    JavaScript

    スクロール時にその場所のコンテンツに応じたサイドバーが追従する「jQuery Stick ‘em」

    ちょっと使いどころがありそうなプラグインだったので使い方をメモしときま…

  4. Lazy Load

    JavaScript

    画像の読み込みを遅らせてスクロールに合わせて表示させるjQueryプラグイン「Lazy Load」

    画像の読み込みを遅らせて表示させることができるjQueryプラグイン「…

  5. no-image

    JavaScript

    いろんなズーム機能を実装できるjQueryプラグイン「xZoom」

    xZoomはいろんなズーム機能を実装することができるカスタマイズ性に優…

  6. StickyStack.js

    JavaScript

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

    StickyStack.jsはパネルにスタッキング効果を実装することが…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP