内部要素がエッジ境界に達したときに親要素がスクロールしないようにするにはどうすればよいですか?

内部要素がエッジ境界に達したときの親要素のスクロールの防止

特定のシナリオでは、内部要素内でスクロールすると、親の望ましくないスクロールがトリガーされる可能性があります内部要素のエッジ境界に達したときの要素。これは、固定位置のフローティング ツールボックスやペインを操作するときに特にイライラする可能性があります。

この不要な伝播を防ぐには、内部要素でスクロール イベントを処理し、親にバブルアップしないようにする必要があります。ただし、event.stopPropagation() を使用するだけでは、すべての場合に十分ではありません。

最も信頼性の高い解決策には、異なるブラウザ間でのスクロール動作を正規化する方法を提供するマウスホイール イベントの使用が含まれます。マウスホイールのデルタと内部要素のスクロール位置を比較することで、スクロールが上部境界または下部境界に到達したかどうかを判断できます。

スクロールがいずれかの境界に到達した場合は、イベントをキャンセルして jQuery のscrollTop( ) メソッドを使用して、スクロール位置を適切な最小値または最大値に設定します。このアプローチは、イベントが親に伝播するのを効果的に防ぎ、内部要素内でのスムーズなスクロールを保証します。

このソリューションを実装するコード スニペットは次のとおりです:

<code class="javascript">$(".ToolPage").bind('mousewheel', function(e, d)  {
    var t = $(this);
    if (d > 0 && t.scrollTop() === 0) {
        e.preventDefault();
    } else {
        if (d < 0 && (t.scrollTop() == t.get(0).scrollHeight - t.innerHeight())) {
            e.preventDefault();
        }
    }
});</code>

このソリューションではマウスが考慮されます。上下の両方にスクロールし、Internet Explorer やその他のブラウザーでの親要素の不要なスクロールを防ぎます。

以上が内部要素がエッジ境界に達したときに親要素がスクロールしないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。