猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

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

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

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


慕村9548890
浏览 1091回答 3
3回答

缥缈止盈

我加入这个答案是为了完整，因为在InternetExplorer中，被接受的答案并不能正确地解决这个问题。..请参阅我原来的帖子关于细节。此外，此解决方案不需要任何插件-仅jQuery。本质上，代码通过处理mousewheel事件。每个这样的事件都包含一个wheelDelta等于px它将把可滚动区域移动到。如果此值是>0，那我们就是在滚动up..如果wheelDelta是<0然后我们就开始滚动down.火狐*Firefox使用DOMMouseScroll作为事件，并填充originalEvent.detail，他的+/-与上面描述的相反。它通常返回3，而其他浏览器则以120(至少在我的机器上)。要纠正，我们只需检测它并乘以-40使之正常化。@EASISTY的回答如果<div>可滚动区域已经位于顶部或底部的最大值位置。Internet资源管理器在以下情况下忽略已取消的事件：delta大于剩余的可滚动空间。换句话说，如果你有一个200px高的<div>含500px可滚动内容和当前scrollTop是400..mousewheel事件，它告诉浏览器滚动120px进一步的结果将导致<div>而<body>滚动，因为400&nbsp;+&nbsp;120&nbsp;>&nbsp;500.因此，为了解决这个问题，我们必须做一些稍微不同的事情，如下所示：所需jQuery守则是：$(document).on('DOMMouseScroll&nbsp;mousewheel',&nbsp;'.Scrollable',&nbsp;function(ev)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;$this&nbsp;=&nbsp;$(this), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scrollTop&nbsp;=&nbsp;this.scrollTop, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scrollHeight&nbsp;=&nbsp;this.scrollHeight, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height&nbsp;=&nbsp;$this.innerHeight(), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;delta&nbsp;=&nbsp;(ev.type&nbsp;==&nbsp;'DOMMouseScroll'&nbsp;? &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ev.originalEvent.detail&nbsp;*&nbsp;-40&nbsp;: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ev.originalEvent.wheelDelta), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;up&nbsp;=&nbsp;delta&nbsp;>&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;prevent&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ev.stopPropagation(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ev.preventDefault(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ev.returnValue&nbsp;=&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!up&nbsp;&&&nbsp;-delta&nbsp;>&nbsp;scrollHeight&nbsp;-&nbsp;height&nbsp;-&nbsp;scrollTop)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Scrolling&nbsp;down,&nbsp;but&nbsp;this&nbsp;will&nbsp;take&nbsp;us&nbsp;past&nbsp;the&nbsp;bottom. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this.scrollTop(scrollHeight); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;prevent(); &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;if&nbsp;(up&nbsp;&&&nbsp;delta&nbsp;>&nbsp;scrollTop)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Scrolling&nbsp;up,&nbsp;but&nbsp;this&nbsp;will&nbsp;take&nbsp;us&nbsp;past&nbsp;the&nbsp;top. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this.scrollTop(0); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;prevent(); &nbsp;&nbsp;&nbsp;&nbsp;}});本质上，此代码将取消创建不需要的边缘条件的任何滚动事件，然后使用jQuery设置scrollTop.的.<div>值的最大值或最小值，取决于mousewheel事件是请求的。由于事件在任何一种情况下都完全被取消，因此它永远不会传播到body因此，它解决了IE以及所有其他浏览器中的问题。我也放了一个jsFiddle上的工作实例.
0

慕后森

我知道这是个很老的问题，但这是谷歌的最高成绩之一.我不得不在没有jQuery的情况下取消滚动冒泡，这段代码适用于我：function&nbsp;preventDefault(e)&nbsp;{ &nbsp;&nbsp;e&nbsp;=&nbsp;e&nbsp;||&nbsp;window.event; &nbsp;&nbsp;if&nbsp;(e.preventDefault) &nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault(); &nbsp;&nbsp;e.returnValue&nbsp;=&nbsp;false;&nbsp;&nbsp;}document.getElementById('a').onmousewheel&nbsp;=&nbsp;function(e)&nbsp;{&nbsp; &nbsp;&nbsp;document.getElementById('a').scrollTop&nbsp;-=&nbsp;e.&nbsp;wheelDeltaY;&nbsp; &nbsp;&nbsp;preventDefault(e);}
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript
JQuery