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

内部要素のスクロール境界での親要素のスクロールの防止

スクロール可能なコンテンツを持つ固定位置の浮動要素を操作する場合、多くの場合、次のことが望ましいです。内部要素が上部または下部に到達したときに、親要素がスクロール イベントを引き継ぐのを防ぎます。これは、内部要素のスクロール範囲が制限されている場合に特にイライラする可能性があります。

イベント バブリングによる試行の失敗

当初、stoppropagation() が効果的にブロックできると想定されていました。親要素へのイベントのバブリング。ただし、指定された関数に入ったにもかかわらず、イベントはまだ伝播していることが判明しました。

マウスホイール イベント処理ソリューション

正しいアプローチには、マウスホイール イベントを直接処理することが含まれていました。イベントの WheelDelta を検出し、ブラウザー固有の正規化係数を利用することで、スクロール方向 (上/下) と要素のスクロール量を決定できます。

エッジ ケース処理

關キーファクターは、マウスホイール イベントによってスクロール位置が内部要素の制限を超えてしまうというエッジ ケースを処理していました。スクロール位置が上か下かを確認し、それに応じて調整することで、このような場合に親要素がスクロールしないようにすることができます。

解決策

次の jQuery コードは、このアプローチを採用しています:

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

    if (!up && -delta > scrollHeight - height - scrollTop) {
        $this.scrollTop(scrollHeight);
        ev.preventDefault();
    } else if (up && delta > scrollTop) {
        $this.scrollTop(0);
        ev.preventDefault();
    }
});</code>

このコードは、マウスホイール イベントをインターセプトして正規化することにより、内部要素のスクロール位置が制限内に留まり、適切な場合に親要素がスクロールするのを効果的に防ぎます。

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