为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕村9548890 2019-07-16 15:18:51
当内部元素滚动位置到达顶部/底部时,防止父元素滚动?我有一个小小的“浮动工具箱”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 回答

?
缥缈止盈

TA贡献2041条经验 获得超4个赞

我加入这个答案是为了完整,因为在InternetExplorer中,被接受的答案并不能正确地解决这个问题。..请参阅我原来的帖子关于细节。此外,此解决方案不需要任何插件-仅jQuery。

本质上,代码通过处理mousewheel事件。每个这样的事件都包含一个wheelDelta等于px它将把可滚动区域移动到。如果此值是>0,那我们就是在滚动up..如果wheelDelta<0然后我们就开始滚动down.

火狐*Firefox使用DOMMouseScroll作为事件,并填充originalEvent.detail,他的+/-与上面描述的相反。它通常返回3,而其他浏览器则以120(至少在我的机器上)。要纠正,我们只需检测它并乘以-40使之正常化。

@EASISTY的回答如果<div>可滚动区域已经位于顶部或底部的最大值位置。Internet资源管理器在以下情况下忽略已取消的事件:delta大于剩余的可滚动空间。

换句话说,如果你有一个200px高的<div>500px可滚动内容和当前scrollTop400..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以及所有其他浏览器中的问题。

我也放了一个jsFiddle上的工作实例.


查看完整回答
反对 回复 2019-07-16
?
慕后森

TA贡献1802条经验 获得超5个赞

我知道这是个很老的问题,但这是谷歌的最高成绩之一.我不得不在没有jQuery的情况下取消滚动冒泡,这段代码适用于我:

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);}


查看完整回答
反对 回复 2019-07-16
  • 3 回答
  • 0 关注
  • 1087 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信