當內部元素到達邊緣邊界時如何防止父元素滾動？

當內部元素到達邊緣邊界時防止父元素滾動

在某些情況下，在內部元素內滾動可能會觸發父元素的意外滾動當到達內部元素的邊緣邊界時，元素。當與浮動工具箱或固定位置的窗格互動時，這可能特別令人沮喪。

為了防止這種不必要的傳播，有必要處理內部元素上的滾動事件並防止其冒泡到父級。然而，僅使用 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中文網其他相關文章！