13

スクロール可能な div がありますが、その下部/上部に到達すると、ページ全体のスクロールが開始されます。これは、高速でスクロールするユーザーにとっては煩わしく、ページ全体が予期せずスクロールし始めます。

divの上にカーソルを置いている場合、ページがスクロールできないものが必要です。

divにカーソルを合わせたときにCSSを追加して、これを試しました...

body {
    overflow:hidden;
}

...動作しますが、問題が 1 つあります。スクロールバーが消え、それが消えたり再表示されたりするのはちょっとばかげているように見えます。同じ効果を達成するが、スクロールバーを表示したままにする方法はありますか? Facebookチャットでそれが行われるのを見てきました。

4

2 に答える 2

28

これは、プラグインを使用せずに jQuery だけで伝播を停止する非常に簡単な方法です。

更新: IE9+ で正しく動作するようにコードが更新されました。以前のバージョンではテストしていません。

最初に、<div>この動作を持つことを示すクラスを作成します。私の例では、クラスを使用し.Scrollableます。

<div class="Scrollable">
  <!-- A bunch of HTML here which will create scrolling -->
</div>

無効にする jQuery は次のとおりです。

$('.Scrollable').on('DOMMouseScroll mousewheel', function(ev) {
    var $this = $(this),
        scrollTop = this.scrollTop,
        scrollHeight = this.scrollHeight,
        height = $this.height(),
        delta = (ev.type == 'DOMMouseScroll' ?
            ev.originalEvent.detail * -40 :
            ev.originalEvent.wheelDelta),
        up = delta > 0;

    var prevent = function() {
        ev.stopPropagation();
        ev.preventDefault();
        ev.returnValue = false;
        return false;
    }

    if (!up && -delta > scrollHeight - height - scrollTop) {
        // Scrolling down, but this will take us past the bottom.
        $this.scrollTop(scrollHeight);
        return prevent();
    } else if (up && delta > scrollTop) {
        // Scrolling up, but this will take us past the top.
        $this.scrollTop(0);
        return prevent();
    }
});

originalEvent.wheelDelta本質的に、これが行うことは、スクロールが要求されている方向を検出することです ( : 正 = up、負 = に基づいてdown)。イベントのリクエストdeltaがのまたはをmousewheel超えてスクロールする場合は、イベントをキャンセルします。topbottom<div>

特に IE では、子要素のスクロール可能領域を通過したスクロール イベントが親要素にロールアップされ、イベントがキャンセルされてもスクロールが続行されます。どのような場合でもイベントをキャンセルしてから、jQuery を介して子のスクロールを制御するため、これは防止されます。

これは、この質問が問題を解決する方法に大まかに基づいていますが、プラグインを必要とせず、IE9+ に準拠したクロスブラウザーです。

これは、動作中のコードを示す動作中の jsFiddleです。

これは、動作中のコードを示す動作中の jsFiddle であり、IE で動作するように更新されています。

これは、動作中のコードを示す動作中の jsFiddle であり、IE および FireFox で動作するように更新されています。変更の必要性について詳しくは、この投稿を参照してください。

于 2013-05-01T19:07:20.987 に答える
1

たぶん見てみる

スクロールを一時的に無効にする方法は?

これは、スクロールを停止してアクティブにするサンプルです

于 2013-05-01T18:08:33.297 に答える