内部要素が終了に達したときに親要素のスクロール伝播を防ぐ方法は?

内部要素が終了に達したときの親要素のスクロール伝播の防止

オーバーフローのある固定 div 内でスクロールする場合、スクロールがリクエストは親要素によって「引き継がれ」、外側のドキュメントがツール ボックスを超えてスクロールします。この動作は、スクロール イベントの伝播を防ぐことで停止できます。

jQuery のevent.stoppropagation() メソッドは適切な解決策のように見えるかもしれませんが、伝播を完全に防ぐことはできません。代わりに、より効果的なアプローチは、jQuery でマウスホイール イベントを処理することです。

マウスホイール イベントには、スクロールの方向と量を示す WheelDelta プロパティが用意されています。 WheelDelta 値をチェックすることで、スクロールが内部 div の上部または下部を超えるかどうかを判断できます。

Internet Explorer との互換性を確保するには、originalEvent.detail プロパティを使用する必要があります。このプロパティは、他のブラウザ。詳細を -40 で乗算すると、すべてのブラウザーで値が正規化されます。

提供された jQuery コードは、このアプローチを示しています。

<code class="javascript">$(document).on('DOMMouseScroll mousewheel', '.Scrollable', function(ev) {
    // Get the div's scroll properties
    var $this = $(this),
        scrollTop = this.scrollTop,
        scrollHeight = this.scrollHeight,
        height = $this.innerHeight(),
        delta = (ev.type == 'DOMMouseScroll' ?
            ev.originalEvent.detail * -40 :
            ev.originalEvent.wheelDelta);

    // Determine if the scroll would exceed the edge conditions
    if (delta > 0 && -delta > scrollHeight - height - scrollTop) {
        // Scrolling down past the bottom, prevent and scroll to bottom
        $this.scrollTop(scrollHeight);
        ev.stopPropagation();
        ev.preventDefault();
        return false;
    } else if (delta < 0 && delta > scrollTop) {
        // Scrolling up past the top, prevent and scroll to top
        $this.scrollTop(0);
        ev.stopPropagation();
        ev.preventDefault();
        return false;
    }
});</code>

マウスホイール イベントを処理し、端に到達したときにスクロールの伝播を防止します。内部 div を使用すると、親要素のスクロールによる望ましくない動作を効果的に防止し、スクロールを目的のコンテナ内に保持できます。

以上が内部要素が終了に達したときに親要素のスクロール伝播を防ぐ方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。