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

防止父元素在內部元素滾動邊界上滾動

使用具有可滾動內容的固定位置浮動元素時，通常需要當內部當元素到達其頂部或底部時，防止父元素接管滾動事件。當內部元素的滾動範圍有限時，這尤其令人沮喪。

事件冒泡嘗試失敗

最初，假設 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中文網其他相關文章！