当内部元素滚动位置到达顶部/底部时，防止滚动父元素？ [英] Prevent scrolling of parent element when inner element scroll position reaches top/bottom?

问题描述

我有一个小的浮动工具箱 - 一个带的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".

I使用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在这里使用mousewheel-plugin：

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,output

这篇关于当内部元素滚动位置到达顶部/底部时，防止滚动父元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！