How to Prevent Parent Element Scroll Propagation When Inner Element Reaches End?

Preventing Parent Element Scroll Propagation When Inner Element Reaches End

When scrolling within a fixed div with overflow, it is often encountered that the scroll request is "taken over" by the parent element, causing the outer document to scroll beyond the tool box. This behavior can be stopped by preventing the scroll event propagation.

While the jQuery event.stoppropagation() method may seem like an appropriate solution, it fails to fully prevent the propagation. Instead, a more effective approach is to handle the mousewheel event in jQuery.

The mousewheel event provides a wheelDelta property that indicates the direction and amount of scrolling. By checking the wheelDelta value, you can determine whether the scroll would exceed the top or bottom of the inner div.

For Internet Explorer compatibility, the originalEvent.detail property needs to be used, which has a reversed sign from the other browsers. Multiplying the detail by -40 normalizes the values across all browsers.

The provided jQuery code demonstrates this approach:

<code class="javascript">$(document).on('DOMMouseScroll mousewheel', '.Scrollable', function(ev) {
    // Get the div's scroll properties
    var $this = $(this),
        scrollTop = this.scrollTop,
        scrollHeight = this.scrollHeight,
        height = $this.innerHeight(),
        delta = (ev.type == 'DOMMouseScroll' ?
            ev.originalEvent.detail * -40 :
            ev.originalEvent.wheelDelta);

    // Determine if the scroll would exceed the edge conditions
    if (delta > 0 && -delta > scrollHeight - height - scrollTop) {
        // Scrolling down past the bottom, prevent and scroll to bottom
        $this.scrollTop(scrollHeight);
        ev.stopPropagation();
        ev.preventDefault();
        return false;
    } else if (delta < 0 && delta > scrollTop) {
        // Scrolling up past the top, prevent and scroll to top
        $this.scrollTop(0);
        ev.stopPropagation();
        ev.preventDefault();
        return false;
    }
});</code>

By handling the mousewheel event and preventing the scroll propagation when reaching the edge of the inner div, you can effectively prevent the unwanted behavior of the parent element scrolling and keep the scroll within the desired container.

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