我有一个“浮动工具箱”-的div position:fixed; overflow:auto。效果很好。
position:fixed; overflow:auto
但是,当在该框内滚动(使用鼠标滚轮)并到达底部或顶部时,父元素将“接管”“滚动请求”:工具箱后面的文档将滚动。 -这很烦人,而不是用户的“要求”。
我正在使用jQuery,并认为可以使用event.stoppropagation()停止此行为: $("#toolBox").scroll( function(event){ 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。
mousewheel
wheelDelta
FireFox:FireFox DOMMouseScroll用作事件,并填充originalEvent.detail,其+/-内容与上述内容相反。通常返回间隔为3,而其他浏览器返回间隔为120(至少在我的机器上)滚动。要更正,我们只需检测它并乘以-40归一化即可。
DOMMouseScroll
originalEvent.detail
如果a <div>的可滚动区域已经位于顶部或底部最大位置,则@amustill的答案通过取消事件来起作用。但是,如果Internet Explorerdelta大于剩余的可滚动空间,则Internet Explorer将忽略取消的事件。
<div>
Internet Explorerdelta
Internet Explorer
换句话说,如果你有一个200px高大<div>含有500px的滚动内容,而目前scrollTop是400中,mousewheel它告诉浏览器事件滚动120px进一步将导致双方<div>和<body>滚动,因为400+ 120> 500。
200px
<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事件请求。
jQuery
scrollTop
由于事件在两种情况下都被完全取消,因此它根本不会传播到body任何地方,因此可以解决IE以及所有其他浏览器中的问题。