当内部元素滚动位置到达顶部/底部时，防止父元素滚动？我有一个小小的“浮动工具箱”position:fixed; overflow:auto..效果很好。但是当在该框内滚动(鼠标轮)并到达底部或顶部时，父元素“接管”滚动请求“：工具箱滚动后的文档。-这是令人讨厌的，而不是用户“要求”的。我正在使用jQuery，并认为我可以通过事件停止这种行为：$("#toolBox").scroll( function(event){ event.stoppropagation() });它确实输入了函数，但是仍然会发生传播(文档滚动)。-在so(和Google)上搜索这个主题是非常困难的，所以我不得不问：如何防止滚动事件的传播/冒泡？编辑：工作解决方案的娱乐(和布兰登亚伦的鼠标轮插件在这里：https：/github.com/brandonaaron/jQuery-mouse轮/RAW/master/jquery.mousewar.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();
}
}});
3 回答
largeQ
TA贡献2039条经验 获得超8个赞
本质上，代码通过处理mousewheel事件。每个这样的事件都包含一个wheelDelta等于px它将把可滚动区域移动到。如果此值是>0，那我们就是在滚动up..如果wheelDelta是<0然后我们就开始滚动down.
火狐*Firefox使用DOMMouseScroll作为事件，并填充originalEvent.detail，他的+/-与上面描述的相反。它通常返回3，而其他浏览器则以120(至少在我的机器上)。要纠正，我们只需检测它并乘以-40使之正常化。
如果<div>可滚动区域已经位于顶部或底部的最大值位置。Internet资源管理器在以下情况下忽略已取消的事件：delta大于剩余的可滚动空间。
换句话说，如果你有一个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以及所有其他浏览器中的问题。
ibeautiful
TA贡献1993条经验 获得超6个赞
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false; }document.getElementById('a').onmousewheel = function(e) {
document.getElementById('a').scrollTop -= e. wheelDeltaY;
preventDefault(e);}添加回答
举报
0/150
提交
取消