当内部元素滚动位置到达顶部/底部时防止父元素滚动? [英] Prevent scrolling of parent element when inner element scroll position reaches top/bottom?
问题描述
我有一个浮动工具箱"——一个带有 position:fixed 的 div;溢出:自动
.工作得很好.
I have a little "floating tool box" - a div with position:fixed; overflow:auto
.
Works just fine.
但是当在该框内滚动(使用鼠标滚轮)并到达底部或顶部时,父元素接管"滚动请求":工具框后面的文档滚动.
- 这很烦人,而不是用户要求"的.
But when scrolling inside that box (with the mouse wheel) and reaching the bottom OR top, the parent element "takes over" the "scroll request" : The document behind the tool box scrolls.
- Which is annoying and not what the user "asked for".
我正在使用 jQuery,并认为我可以通过 event.stoppropagation() 来阻止这种行为:$("#toolBox").scroll( function(event){ event.stoppropagation() });
I'm using jQuery and thought I could stop this behaviour with event.stoppropagation():
$("#toolBox").scroll( function(event){ event.stoppropagation() });
它确实进入了函数,但仍然会发生传播(文档滚动)
- 在 SO(和 Google)上搜索这个主题出奇地困难,所以我不得不问:
如何防止滚动事件的传播/冒泡?
It does enter the function, but still, propagation happens anyway (the document scrolls)
- It's surprisingly hard to search for this topic on SO (and Google), so I have to ask:
How to prevent propagation / bubbling of the scroll-event ?
感谢 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();
}
}
});
推荐答案
可以使用 Brandon Aaron 的 鼠标滚轮插件.
It's possible with the use of Brandon Aaron's Mousewheel plugin.
这是一个演示:http://jsbin.com/jivutakama/edit?html,js,输出
这篇关于当内部元素滚动位置到达顶部/底部时防止父元素滚动?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!