当内部元素滚动位置到达顶部/底部时，防止父元素滚动？

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个“浮动工具箱”-的div position:fixed; overflow:auto。效果很好。

但是，当在该框内滚动（使用鼠标滚轮）并到达底部或顶部时，父元素将“接管”“滚动请求”：工具箱后面的文档将滚动。

-这很烦人，而不是用户的“要求”。

我正在使用jQuery，并认为可以使用event.stoppropagation（）停止此行为：

$("#toolBox").scroll( function(event){ event.stoppropagation() });

它确实输入了该函数，但是仍然会发生传播（文档滚动） 很难在SO（和Google）上搜索此主题，所以我不得不问：

如何防止滚动事件的传播/冒泡？

$(".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();
        }
    }
});

回答：

我添加此答案是出于完整性考虑，因为@amustill接受的答案不能正确解决Internet Explorer中的问题。此外，此解决方案不需要任何插件-仅需要jQuery。

本质上，代码通过处理mousewheel事件来工作。每个此类事件都包含一个wheelDelta等于要将px可滚动区域移动到的事件的数量。如果该值为>0，则我们正在滚动up。如果wheelDelta是，<0那么我们正在滚动down。

FireFox：FireFox DOMMouseScroll用作事件，并填充originalEvent.detail，其+/-内容与上述内容相反。通常返回间隔为3，而其他浏览器返回间隔为120（至少在我的机器上）滚动。要更正，我们只需检测它并乘以-40归一化即可。

如果a <div>的可滚动区域已经位于顶部或底部最大位置，则@amustill的答案通过取消事件来起作用。但是，如果Internet Explorerdelta大于剩余的可滚动空间，则Internet Explorer将忽略取消的事件。

换句话说，如果你有一个200px高大<div>含有500px的滚动内容，而目前scrollTop是400中，mousewheel它告诉浏览器事件滚动120px进一步将导致双方<div>和<body>滚动，因为400+ 120> 500。

所以-要解决该问题，我们必须做一些稍微不同的事情，如下所示：

必需的jQuery代码是：

$(document).on('DOMMouseScroll mousewheel', '.Scrollable', 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;
    var prevent = function() {
        ev.stopPropagation();
        ev.preventDefault();
        ev.returnValue = false;
        return false;
    }
    if (!up && -delta > scrollHeight - height - scrollTop) {
        // Scrolling down, but this will take us past the bottom.
        $this.scrollTop(scrollHeight);
        return prevent();
    } else if (up && delta > scrollTop) {
        // Scrolling up, but this will take us past the top.
        $this.scrollTop(0);
        return prevent();
    }
});

本质上，该代码可以取消任何滚动事件这将创建不希望的边缘条件，则用了jQuery设置scrollTop的<div>到最大值或最小值，这取决于哪个方向mousewheel事件请求。

由于事件在两种情况下都被完全取消，因此它根本不会传播到body任何地方，因此可以解决IE以及所有其他浏览器中的问题。

以上是 当内部元素滚动位置到达顶部/底部时，防止父元素滚动？ 的全部内容， 来源链接： utcz.com/qa/408151.html

回到顶部