How to Prevent Parent Element Scroll When Inner Element Reaches its Scroll Bounds?

Preventing Parent Element Scroll on Inner Element Scroll Bounds

When working with a fixed-position floating element with scrollable content, it's often desirable to prevent the parent element from taking over the scroll event when the inner element reaches its top or bottom. This can be especially frustrating when the inner element has limited scroll range.

Failed Attempts with Event Bubbling

Initially, it was assumed that stoppropagation() could effectively block the event bubbling to the parent element. However, it was found that the event still propagated, despite entering the specified function.

Mousewheel Event Handling Solution

The correct approach involved handling the mousewheel event directly. By detecting the event's wheelDelta and utilizing browser-specific normalization factors, it's possible to determine the scroll direction (up/down) and the amount by which the element is being scrolled.

Edge Case Handling

The關鍵factor was handling edge cases where the mousewheel event would push the scroll position beyond the inner element's limits. By checking if the scroll position was at the top or bottom and adjusting it accordingly, it becomes possible to prevent the parent element from scrolling in these cases.

Working Solution

The following jQuery code employs this approach:

<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>

By intercepting and normalizing the mousewheel event, this code ensures that the inner element's scroll position remains within its limits, effectively preventing the parent element from scrolling when appropriate.

The above is the detailed content of How to Prevent Parent Element Scroll When Inner Element Reaches its Scroll Bounds?. For more information, please follow other related articles on the PHP Chinese website!