当内部元素滚动位置达到顶部/底部时，防止父元素的滚动?

我有一个小的“浮动工具箱”-一个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();
        }
    }
});

当前回答

mouseweel事件的简单解决方案:

$('.element').bind('mousewheel', function(e, d) {
    console.log(this.scrollTop,this.scrollHeight,this.offsetHeight,d);
    if((this.scrollTop === (this.scrollHeight - this.offsetHeight) && d < 0)
        || (this.scrollTop === 0 && d > 0)) {
        e.preventDefault();
    }
});

2015-11-05 14:04:02

其他回答

使用Brandon Aaron的Mousewheel插件，这是可能的。

这里是一个演示:http://jsbin.com/jivutakama/edit?html,js,output

$(function() {

  var toolbox = $('#toolbox'),
      height = toolbox.height(),
      scrollHeight = toolbox.get(0).scrollHeight;

  toolbox.bind('mousewheel', function(e, d) {
    if((this.scrollTop === (scrollHeight - height) && d < 0) || (this.scrollTop === 0 && d > 0)) {
      e.preventDefault();
    }
  });

});

2011-04-27 10:53:05

对于那些使用MooTools的人，这里是等效的代码:

            'mousewheel': function(event){
            var height = this.getSize().y;
            height -= 2;    // Not sure why I need this bodge
            if ((this.scrollTop === (this.scrollHeight - height) && event.wheel < 0) || 
                (this.scrollTop === 0 && event.wheel > 0)) {
                event.preventDefault();
            }

请记住，像其他人一样，我必须将一个值调整几个px，这就是height -= 2的意义。

基本上，主要的区别是在MooTools中，增量信息来自事件。轮，而不是传递给事件的额外参数。

此外，如果我将这段代码绑定到任何东西(event.target。绑定函数的scrollHeight不等于此值。scrollHeight(非绑定)

希望这篇文章能像这篇文章帮助我一样帮助别人;)

2011-12-11 12:14:01

我们可以简单地使用CSS。为子滚动容器元素提供一个样式。

 style="overscroll-behavior: contain"

它不会触发父节点的滚动事件。

2022-08-12 15:00:09

使用本地元素滚动属性和mousewheel插件的delta值:

$elem.on('mousewheel', function (e, delta) {
    // Restricts mouse scrolling to the scrolling range of this element.
    if (
        this.scrollTop < 1 && delta > 0 ||
        (this.clientHeight + this.scrollTop) === this.scrollHeight && delta < 0
    ) {
        e.preventDefault();
    }
});

2013-06-19 12:47:00

不要使用overflow: hidden;在身体。它会自动将所有内容滚动到顶部。也不需要JavaScript。利用overflow: auto;:

HTML结构

<div class="overlay">
    <div class="overlay-content"></div>
</div>

<div class="background-content">
    lengthy content here
</div>

样式

.overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.8);

    .overlay-content {
        height: 100%;
        overflow: scroll;
    }
}

.background-content{
    height: 100%;
    overflow: auto;
}

在这里玩演示。

2014-11-11 09:19:20

当内部元素滚动位置达到顶部/底部时，防止父元素的滚动?

推荐文章

最新文章

标签