我有一个小的“浮动工具箱”-一个div的位置:fixed;溢出:汽车。
工作得很好。
但是当滚动到盒子里面(用鼠标滚轮)并到达底部或顶部时，父元素“接管”“滚动请求”:工具箱后面的文档滚动。
-这是恼人的，而不是用户“要求”。
我正在使用jQuery，并认为我可以用event.stoppropagation()停止这种行为:
$(" #工具箱”)。Scroll (function(event){event.stoppropagation()});
它确实进入了函数，但传播仍然发生(文档滚动)
在SO(和谷歌)上搜索这个话题是非常困难的，所以我不得不问:
如何防止滚动事件的传播/冒泡?
编辑:
工作解决方案感谢amustill(和Brandon Aaron的鼠标轮插件在这里:
https://github.com/brandonaaron/jquery-mousewheel/raw/master/jquery.mousewheel.js
$(".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();
}
}
});
新的web开发人员在这里。这对我来说在IE和Chrome浏览器上都很有吸引力。
static preventScrollPropagation(e: HTMLElement) {
e.onmousewheel = (ev) => {
var preventScroll = false;
var isScrollingDown = ev.wheelDelta < 0;
if (isScrollingDown) {
var isAtBottom = e.scrollTop + e.clientHeight == e.scrollHeight;
if (isAtBottom) {
preventScroll = true;
}
} else {
var isAtTop = e.scrollTop == 0;
if (isAtTop) {
preventScroll = true;
}
}
if (preventScroll) {
ev.preventDefault();
}
}
}
不要被行数骗了，其实很简单——只是为了可读性有点啰嗦(自文档代码对吧?)
我还应该提到这里的语言是TypeScript，但和往常一样，将它转换为JS很简单。
在这个线程中给出的所有解决方案都没有提到一个现有的和本地的方法来解决这个问题，而不需要重新排序DOM和/或使用事件阻止技巧。但是有一个很好的理由:这种方法是专有的-并且只能在MS web平台上使用。引用MSDN:
-ms-scroll- chainingproperty -指定当用户在操作过程中达到滚动限制时发生的滚动行为。属性值:
chained -初始值。当用户在操作期间达到滚动限制时，最近的可滚动父元素开始滚动。没有反弹效果显示。
none -当用户在操作过程中碰到滚动限制时，会显示一个反弹效果。
当然，此属性仅在IE10+/Edge上支持。不过，这里有一句很有说服力的话:
为了让您了解防止滚动链接的流行程度，
根据我的快速http档案搜索“-ms-scroll-chaining:无”
在前300K页的0.4%中使用，尽管在
功能，只支持IE/Edge。
现在有好消息了，各位!从Chrome 63开始，我们终于有了针对基于blink的平台的原生疗法——这就是Chrome(显然)和Android WebView(很快)。
引用介绍文章:
The overscroll-behavior property is a new CSS feature that controls
the behavior of what happens when you over-scroll a container
(including the page itself). You can use it to cancel scroll chaining,
disable/customize the pull-to-refresh action, disable rubberbanding
effects on iOS (when Safari implements overscroll-behavior), and more.[...]
The property takes three possible values:
auto - Default. Scrolls that originate on the element may propagate to
ancestor elements.
contain - prevents scroll chaining. Scrolls do not
propagate to ancestors but local effects within the node are shown.
For example, the overscroll glow effect on Android or the
rubberbanding effect on iOS which notifies the user when they've hit a
scroll boundary. Note: using overscroll-behavior: contain on the html
element prevents overscroll navigation actions.
none - same as contain but it also prevents overscroll effects within the node itself (e.g. Android overscroll glow or iOS rubberbanding).
[...] The best part is that using overscroll-behavior does not adversely
affect page performance like the hacks mentioned in the intro!
下面是这个功能的实际情况。这里是相应的CSS模块文档。
更新:Firefox从59版开始加入这个俱乐部，MS Edge预计将在18版实现这个功能。这是相应的犬科用法。
更新2:现在(2022年10月)Safari正式加入了这个俱乐部:从16.0版本开始，overscroll行为不再落后于功能标志。
jQuery插件模拟自然滚动的Internet Explorer
$.fn.mousewheelStopPropagation = function(options) {
options = $.extend({
// defaults
wheelstop: null // Function
}, options);
// Compatibilities
var isMsIE = ('Microsoft Internet Explorer' === navigator.appName);
var docElt = document.documentElement,
mousewheelEventName = 'mousewheel';
if('onmousewheel' in docElt) {
mousewheelEventName = 'mousewheel';
} else if('onwheel' in docElt) {
mousewheelEventName = 'wheel';
} else if('DOMMouseScroll' in docElt) {
mousewheelEventName = 'DOMMouseScroll';
}
if(!mousewheelEventName) { return this; }
function mousewheelPrevent(event) {
event.preventDefault();
event.stopPropagation();
if('function' === typeof options.wheelstop) {
options.wheelstop(event);
}
}
return this.each(function() {
var _this = this,
$this = $(_this);
$this.on(mousewheelEventName, function(event) {
var origiEvent = event.originalEvent;
var scrollTop = _this.scrollTop,
scrollMax = _this.scrollHeight - $this.outerHeight(),
delta = -origiEvent.wheelDelta;
if(isNaN(delta)) {
delta = origiEvent.deltaY;
}
var scrollUp = delta < 0;
if((scrollUp && scrollTop <= 0) || (!scrollUp && scrollTop >= scrollMax)) {
mousewheelPrevent(event);
} else if(isMsIE) {
// Fix Internet Explorer and emulate natural scrolling
var animOpt = { duration:200, easing:'linear' };
if(scrollUp && -delta > scrollTop) {
$this.stop(true).animate({ scrollTop:0 }, animOpt);
mousewheelPrevent(event);
} else if(!scrollUp && delta > scrollMax - scrollTop) {
$this.stop(true).animate({ scrollTop:scrollMax }, animOpt);
mousewheelPrevent(event);
}
}
});
});
};
https://github.com/basselin/jquery-mousewheel-stop-propagation/blob/master/mousewheelStopPropagation.js
我添加这个答案是为了完整性，因为@amustill接受的答案在Internet Explorer中不能正确解决问题。详情请参阅我原始帖子中的评论。另外，这个解决方案不需要任何插件——只需要jQuery。
本质上，代码通过处理鼠标滚轮事件来工作。每个这样的事件都包含一个wheelDelta，它等于它要将可滚动区域移动到的px的数量。如果这个值是>0，那么我们向上滚动。如果wheelDelta <0，则向下滚动。
FireFox: FireFox使用DOMMouseScroll作为事件，并填充originalEvent.detail，其+/-与上面描述的相反。它通常以3为间隔返回滚动，而其他浏览器则以120为间隔返回滚动(至少在我的机器上是这样)。为了纠正，我们只需检测它并乘以-40来归一化。
@amustill的答案是取消事件，如果<div>的滚动区域已经在顶部或底部的最大位置。但是，当增量大于剩余的可滚动空间时，Internet Explorer将忽略已取消的事件。
换句话说，如果你有一个200px高的<div>包含500px的可滚动内容，而当前的scrollTop是400，一个告诉浏览器再滚动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将<div>的scrollTop设置为最大值或最小值，这取决于鼠标滚轮事件请求的方向。
由于事件在任何一种情况下都被完全取消，因此它根本不会传播到主体，因此解决了IE以及所有其他浏览器中的问题。
我还在jsFiddle上提供了一个工作示例。
