我有一个“浮动工具箱” - 一个带position:fixed; overflow:auto的div。
工作得很好。
但是当在该框内滚动（使用鼠标滚轮）并到达底部或顶部时，父元素“接管”“滚动请求”：工具框后面的文档滚动。
- 这很烦人而不是用户“要求”。
我正在使用jQuery，并认为我可以使用event.stoppropagation（）停止此行为：
$("#toolBox").scroll( function(event){ event.stoppropagation() });
它确实进入了该功能，但仍然无论如何传播（文件滚动）
- 在SO（和Google）上搜索这个主题非常困难，所以我不得不问：
如何防止滚动事件的传播/冒泡？
编辑：
工作解决方案感谢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();
}
}
});
答案 0 :(得分：167)
我添加此答案是为了完整性，因为 @amustill接受的答案无法正确解决Internet Explorer中的问题。有关详细信息，请参阅my original post中的评论。此外，这个解决方案不需要任何插件 - 只有jQuery。
本质上，代码通过处理mousewheel事件来工作。每个此类事件都包含一个wheelDelta，等于它将可滚动区域移动到的px的数量。如果此值为>0，则我们滚动up。如果wheelDelta为<0，那么我们正在滚动down。
FireFox ：FireFox使用DOMMouseScroll作为事件，并填充originalEvent.detail，+/-与上述内容相反。它通常返回3的间隔，而其他浏览器以120的间隔返回滚动（至少在我的机器上）。为了纠正，我们只需检测它并乘以-40进行标准化。
<div>的可滚动区域已位于顶部或底部最大位置，则 @amustill's answer通过取消事件起作用。但是， Internet Explorer 会在delta大于剩余可滚动空间的情况下忽略已取消的事件。
换句话说，如果您的200px高<div>包含500px可滚动内容，而当前scrollTop为400，则为{{ 1}}告诉浏览器进一步滚动mousewheel的事件将导致120px和<div>滚动，因为<body> + 400＆gt; 120。
所以 - 要解决问题，我们必须做一些略有不同的事情，如下所示：
必备的500代码是：
jQuery本质上，此代码取消任何会产生不需要的边缘条件的滚动事件，然后使用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();
}
});
的{{1}}设置为最大值或最小值，具体取决于哪个方向scrollTop事件正在请求。
因为事件在任何一种情况下都被完全取消，所以它根本不会传播到<div>，因此解决了IE以及所有其他浏览器中的问题。
答案 1 :(得分：38)
可以使用Brandon Aaron的Mousewheel plugin。
答案 2 :(得分：19)
我知道这是一个相当古老的问题，但由于这是google中的最佳结果之一...我不得不以某种方式取消滚动冒泡而不使用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);
}
答案 3 :(得分：19)
对于AngularJS，我定义了以下指令：
module.directive('isolateScrolling', function () {
return {
restrict: 'A',
link: function (scope, element, attr) {
element.bind('DOMMouseScroll', function (e) {
if (e.detail > 0 && this.clientHeight + this.scrollTop == this.scrollHeight) {
this.scrollTop = this.scrollHeight - this.clientHeight;
e.stopPropagation();
e.preventDefault();
return false;
}
else if (e.detail < 0 && this.scrollTop <= 0) {
this.scrollTop = 0;
e.stopPropagation();
e.preventDefault();
return false;
}
});
element.bind('mousewheel', function (e) {
if (e.deltaY > 0 && this.clientHeight + this.scrollTop >= this.scrollHeight) {
this.scrollTop = this.scrollHeight - this.clientHeight;
e.stopPropagation();
e.preventDefault();
return false;
}
else if (e.deltaY < 0 && this.scrollTop <= 0) {
this.scrollTop = 0;
e.stopPropagation();
e.preventDefault();
return false;
}
return true;
});
}
};
});
然后将其添加到可滚动元素（下拉菜单ul）：
<div class="dropdown">
<button type="button" class="btn dropdown-toggle">Rename <span class="caret"></span></button>
<ul class="dropdown-menu" isolate-scrolling>
<li ng-repeat="s in savedSettings | objectToArray | orderBy:'name' track by s.name">
<a ng-click="renameSettings(s.name)">{{s.name}}</a>
</li>
</ul>
</div>
在Chrome和Firefox上测试过。当在滚动区域的顶部或底部附近（但不是在）处进行大型鼠标滚轮移动时，Chrome的平滑滚动会破坏此黑客攻击。
答案 4 :(得分：11)
有很多像这样的问题，有很多答案，但我找不到一个不涉及事件，脚本，插件等的令人满意的解决方案。我想在HTML和CSS中保持直接。我终于找到了一个有效的解决方案，虽然它涉及重组标记以打破事件链。
<强> 1。基本问题
应用于模态元素的滚动输入（即：mousewheel）会溢出到祖先元素中并以相同的方向滚动它，如果某些元素可滚动的话：
（所有示例均应在桌面分辨率下查看）
https://jsfiddle.net/ybkbg26c/5/
HTML：
<div id="parent">
<div id="modal">
This text is pretty long here. Hope fully, we will get some scroll bars.
</div>
</div>
CSS：
#modal {
position: absolute;
height: 100px;
width: 100px;
top: 20%;
left: 20%;
overflow-y: scroll;
}
#parent {
height: 4000px;
}
<强> 2。没有父级滚动模态滚动
祖先最终滚动的原因是因为滚动事件冒泡并且链上的某些元素能够处理它。阻止它的一种方法是确保链上没有任何元素知道如何处理滚动。就我们的例子而言，我们可以重构树以将模态移出父元素。由于不明原因，保留父级和模态DOM兄弟是不够的;父级必须由另一个建立新堆叠上下文的元素包装。围绕父母的绝对定位包装可以做到这一点。
我们得到的结果是，只要模态接收到滚动事件，事件就不会冒泡到“父”元素。
通常应该可以重新设计DOM树以支持此行为，而不会影响最终用户看到的内容。
https://jsfiddle.net/0bqq31Lv/3/
HTML：
<div id="context">
<div id="parent">
</div>
</div>
<div id="modal">
This text is pretty long here. Hope fully, we will get some scroll bars.
</div>
CSS（仅限新）：
#context {
position: absolute;
overflow-y: scroll;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
第3。除了模态中的任何地方都没有滚动
上述解决方案仍然允许父级接收滚动事件，只要它们不被模态窗口拦截（即，如果光标不在模态上时由鼠标轮触发）。这有时是不受欢迎的，我们可能希望在模态启动时禁止所有背景滚动。为此，我们需要插入一个额外的堆叠上下文，该上下文跨越模态后面的整个视口。我们可以通过显示绝对定位的叠加来实现，必要时可以完全透明（但不是visibility:hidden）。
https://jsfiddle.net/0bqq31Lv/2/
HTML：
<div id="context">
<div id="parent">
</div>
</div>
<div id="overlay">
</div>
<div id="modal">
This text is pretty long here. Hope fully, we will get some scroll bars.
</div>
CSS（＃2之上的新内容）：
#overlay {
background-color: transparent;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
答案 5 :(得分：11)
此线程中给出的所有解决方案都没有提及现有的 - 本机 - 解决此问题的方法，无需重新排序DOM和/或使用事件阻止技巧。但有一个很好的理由：这种方式是专有的 - 只能在MS网络平台上使用。引用MSDN：
-ms-scroll-chaining 属性 - 指定用户在操作期间达到滚动限制时发生的滚动行为。物业价值：
链接 - 初始值。当用户在操纵期间点击滚动限制时，最近的可滚动父元素开始滚动。没有显示跳出效果。
无 - 在操作过程中用户点击滚动限制时会显示跳出效果。
当然，IE10 + / Edge仅支持此属性。不过，这是一个telling quote：
为了让您了解防止滚动链接的流行程度， 根据我的快速http-archive搜索“-ms-scroll-chaining：none” 虽然受到限制，但在最高300K页面的0.4％中使用 功能，仅在IE / Edge上受支持。
现在好消息，大家好！从Chrome 63开始，我们终于可以为基于Blink的平台提供本机解决方案 - 这既是Chrome（显然）也是Android WebView（很快）。
overscroll-behavior 属性是一个新的CSS功能，可以控制 过度滚动容器时会发生什么行为 （包括页面本身）。你可以用它来取消滚动链接， 禁用/自定义拉动刷新操作，禁用橡皮筋 对iOS的影响（当Safari实现过度滚动行为时）等等。[...]
该属性有三个可能的值：
自动 - 默认。源自元素的滚动可以传播到 祖先元素。
包含 - 阻止滚动链接。滚动没有 传播到祖先，但显示节点内的局部效果。 例如，Android或者上的过度滚动发光效果 iOS上的橡皮筋效果，可以在用户点击时通知用户 滚动边界。注意：使用overscroll-behavior：包含在html上 元素可以防止过度滚动导航操作。
无 - 与包含相同，但它也可以防止节点内部出现过度滚动效应（例如Android过度滚动发光或iOS橡皮筋）。
[...] 最好的部分是使用过度滚动行为并不会产生负面影响 影响页面性能，如介绍中提到的黑客！
这是feature in action。这里是相应的CSS Module document。
更新：自59版以来，Firefox已加入俱乐部，预计MS Edge将在版本18中实施此功能。这是相应的caniusage。
答案 6 :(得分：9)
我必须包装一个角度指令。以下是其他答案的混搭。在Chrome和Internet Explorer 11上测试。
var app = angular.module('myApp');
app.directive("preventParentScroll", function () {
return {
restrict: "A",
scope: false,
link: function (scope, elm, attr) {
elm.bind('mousewheel', onMouseWheel);
function onMouseWheel(e) {
elm[0].scrollTop -= (e.wheelDeltaY || (e.originalEvent && (e.originalEvent.wheelDeltaY || e.originalEvent.wheelDelta)) || e.wheelDelta || 0);
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
}
}
}
});
用法
<div prevent-parent-scroll>
...
</div>
希望这可以帮助下一个从谷歌搜索到来的人。
答案 7 :(得分：8)
这是一个简单的JavaScript版本：
function scroll(e) {
var delta = (e.type === "mousewheel") ? e.wheelDelta : e.detail * -40;
if (delta < 0 && (this.scrollHeight - this.offsetHeight - this.scrollTop) <= 0) {
this.scrollTop = this.scrollHeight;
e.preventDefault();
} else if (delta > 0 && delta > this.scrollTop) {
this.scrollTop = 0;
e.preventDefault();
}
}
document.querySelectorAll(".scroller").addEventListener("mousewheel", scroll);
document.querySelectorAll(".scroller").addEventListener("DOMMouseScroll", scroll);
答案 8 :(得分：8)
作为变体，为避免scroll或mousewheel处理时出现性能问题，您可以使用以下代码：
的CSS：
body.noscroll {
overflow: hidden;
}
.scrollable {
max-height: 200px;
overflow-y: scroll;
border: 1px solid #ccc;
}
HTML：
<div class="scrollable">
...A bunch of items to make the div scroll...
</div>
...A bunch of text to make the body scroll...
JS：
var $document = $(document),
$body = $('body'),
$scrolable = $('.scrollable');
$scrolable.on({
'mouseenter': function () {
// add hack class to prevent workspace scroll when scroll outside
$body.addClass('noscroll');
},
'mouseleave': function () {
// remove hack class to allow scroll
$body.removeClass('noscroll');
}
});
答案 9 :(得分：7)
将本机元素滚动属性与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();
}
});
答案 10 :(得分：6)
如果有人仍在为此寻找解决方案，则以下插件可以完成这项工作http://mohammadyounes.github.io/jquery-scrollLock/
它完全解决了在给定容器内锁定鼠标滚轮滚动的问题，防止其传播到父元素。
它不会改变滚轮滚动速度，不会影响用户体验。无论操作系统鼠标滚轮垂直滚动速度如何，您都可以获得相同的行为（在Windows上，它可以设置为一个屏幕，也可以设置为每行最多100行的一行）。
演示：http://mohammadyounes.github.io/jquery-scrollLock/example/
答案 11 :(得分：4)
amustill作为淘汰赛处理员的答案：
ko.bindingHandlers.preventParentScroll = {
init: function (element, valueAccessor, allBindingsAccessor, context) {
$(element).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();
}
}
});
}
};
答案 12 :(得分：4)
这实际上适用于AngularJS。 在Chrome和Firefox上测试过。
.directive('stopScroll', function () {
return {
restrict: 'A',
link: function (scope, element, attr) {
element.bind('mousewheel', function (e) {
var $this = $(this),
scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
height = $this.height(),
delta = (e.type == 'DOMMouseScroll' ?
e.originalEvent.detail * -40 :
e.originalEvent.wheelDelta),
up = delta > 0;
var prevent = function() {
e.stopPropagation();
e.preventDefault();
e.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();
}
});
}
};
})
答案 13 :(得分：4)
上面的方法不是那么自然，经过一些谷歌搜索我发现一个更好的解决方案，而不需要jQuery。见[1]和演示[2]。
var element = document.getElementById('uf-notice-ul');
var isMacWebkit = (navigator.userAgent.indexOf("Macintosh") !== -1 &&
navigator.userAgent.indexOf("WebKit") !== -1);
var isFirefox = (navigator.userAgent.indexOf("firefox") !== -1);
element.onwheel = wheelHandler; // Future browsers
element.onmousewheel = wheelHandler; // Most current browsers
if (isFirefox) {
element.scrollTop = 0;
element.addEventListener("DOMMouseScroll", wheelHandler, false);
}
// prevent from scrolling parrent elements
function wheelHandler(event) {
var e = event || window.event; // Standard or IE event object
// Extract the amount of rotation from the event object, looking
// for properties of a wheel event object, a mousewheel event object
// (in both its 2D and 1D forms), and the Firefox DOMMouseScroll event.
// Scale the deltas so that one "click" toward the screen is 30 pixels.
// If future browsers fire both "wheel" and "mousewheel" for the same
// event, we'll end up double-counting it here. Hopefully, however,
// cancelling the wheel event will prevent generation of mousewheel.
var deltaX = e.deltaX * -30 || // wheel event
e.wheelDeltaX / 4 || // mousewheel
0; // property not defined
var deltaY = e.deltaY * -30 || // wheel event
e.wheelDeltaY / 4 || // mousewheel event in Webkit
(e.wheelDeltaY === undefined && // if there is no 2D property then
e.wheelDelta / 4) || // use the 1D wheel property
e.detail * -10 || // Firefox DOMMouseScroll event
0; // property not defined
// Most browsers generate one event with delta 120 per mousewheel click.
// On Macs, however, the mousewheels seem to be velocity-sensitive and
// the delta values are often larger multiples of 120, at
// least with the Apple Mouse. Use browser-testing to defeat this.
if (isMacWebkit) {
deltaX /= 30;
deltaY /= 30;
}
e.currentTarget.scrollTop -= deltaY;
// If we ever get a mousewheel or wheel event in (a future version of)
// Firefox, then we don't need DOMMouseScroll anymore.
if (isFirefox && e.type !== "DOMMouseScroll") {
element.removeEventListener("DOMMouseScroll", wheelHandler, false);
}
// Don't let this event bubble. Prevent any default action.
// This stops the browser from using the mousewheel event to scroll
// the document. Hopefully calling preventDefault() on a wheel event
// will also prevent the generation of a mousewheel event for the
// same rotation.
if (e.preventDefault) e.preventDefault();
if (e.stopPropagation) e.stopPropagation();
e.cancelBubble = true; // IE events
e.returnValue = false; // IE events
return false;
}
[1] https://dimakuzmich.wordpress.com/2013/07/16/prevent-scrolling-of-parent-element-with-javascript/
答案 14 :(得分：2)
我有类似的情况，以及我如何解决它：
我的所有可滚动元素都获得了类可滚动。
$(document).on('wheel', '.scrollable', function(evt) {
var offsetTop = this.scrollTop + parseInt(evt.originalEvent.deltaY, 10);
var offsetBottom = this.scrollHeight - this.getBoundingClientRect().height - offsetTop;
if (offsetTop < 0 || offsetBottom < 0) {
evt.preventDefault();
} else {
evt.stopImmediatePropagation();
}
});
stopImmediatePropagation（）确保不从可滚动子区域滚动父可滚动区域。
这是一个vanilla JS实现： http://jsbin.com/lugim/2/edit?js,output
答案 15 :(得分：2)
这里有新的网络开发者。在IE和Chrome上，这对我来说就像是一种魅力。
static preventScrollPropagation(e: HTMLElement) {
e.onmousewheel = (ev) => {
var preventScroll = false;
var isScrollingDown = ev.wheelDelta < 0;
if (isScrollingDown) {
var isAtBottom = e.scrollTop + e.clientHeight == e.scrollHeight;
if (isAtBottom) {
preventScroll = true;
}
} else {
var isAtTop = e.scrollTop == 0;
if (isAtTop) {
preventScroll = true;
}
}
if (preventScroll) {
ev.preventDefault();
}
}
}
不要让行数欺骗你，这很简单 - 只是有点冗长的可读性（自我记录代码ftw对吗？）
另外我应该提到这里的语言是TypeScript，但是一如既往，将它转换为JS是很简单的。
答案 16 :(得分：1)
查看Leland Kwong's代码。
基本思想是将转轮事件绑定到子元素，然后使用子元素的本机javascript属性a a a a
a a O a
a a a a
a a a a
和jquery属性scrollHeight来检测滚动的结尾，其中outerHeight来转动事件以阻止任何滚动。
return false答案 17 :(得分：1)
我从所选的图书馆中找到了这个：https://github.com/harvesthq/chosen/blob/master/coffee/chosen.jquery.coffee
function preventParentScroll(evt) {
var delta = evt.deltaY || -evt.wheelDelta || (evt && evt.detail)
if (delta) {
evt.preventDefault()
if (evt.type == 'DOMMouseScroll') {
delta = delta * 40
}
fakeTable.scrollTop = delta + fakeTable.scrollTop
}
}
var el = document.getElementById('some-id')
el.addEventListener('mousewheel', preventParentScroll)
el.addEventListener('DOMMouseScroll', preventParentScroll)
这适合我。
答案 18 :(得分：1)
我的jQuery插件：
$('.child').dontScrollParent();
$.fn.dontScrollParent = function()
{
this.bind('mousewheel DOMMouseScroll',function(e)
{
var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;
if (delta > 0 && $(this).scrollTop() <= 0)
return false;
if (delta < 0 && $(this).scrollTop() >= this.scrollHeight - $(this).height())
return false;
return true;
});
}
答案 19 :(得分：1)
对于使用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来调整一个值，这就是高度 - = 2的含义。
基本上，主要区别在于，在MooTools中，delta信息来自event.wheel，而不是传递给事件的额外参数。
此外，如果我将此代码绑定到任何内容，我遇到了问题（对于绑定函数，event.target.scrollHeight不等于this.scrollHeight用于非绑定函数）
希望这可以帮助某人，就像这篇文章对我有所帮助;）
答案 20 :(得分：0)
M.K.在他的回答中提供了一个很好的插件。可以找到插件here。但是，为了完成起见，我认为将它放在AngularJS的一个答案中是一个好主意。
首先注入凉亭或npm（取决于哪个）
bower install jquery-scrollLock --save
npm install jquery-scroll-lock --save
添加以下指令。我选择将其添加为属性
(function() {
'use strict';
angular
.module('app')
.directive('isolateScrolling', isolateScrolling);
function isolateScrolling() {
return {
restrict: 'A',
link: function(sc, elem, attrs) {
$('.scroll-container').scrollLock();
}
}
}
})();
插件无法在其网站上记录的重要内容是它必须遵循的HTML结构。
<div class="scroll-container locked">
<div class="scrollable" isolate-scrolling>
... whatever ...
</div>
</div>
属性isolate-scrolling必须包含scrollable类，并且它们都需要位于scroll-container类或您选择的任何类中，并且locked类必须是级联的。
答案 21 :(得分：0)
ES 6跨浏览器+移动vanila js决定：
function stopParentScroll(selector) {
let last_touch;
let MouseWheelHandler = (e, selector) => {
let delta;
if(e.deltaY)
delta = e.deltaY;
else if(e.wheelDelta)
delta = e.wheelDelta;
else if(e.changedTouches){
if(!last_touch){
last_touch = e.changedTouches[0].clientY;
}
else{
if(e.changedTouches[0].clientY > last_touch){
delta = -1;
}
else{
delta = 1;
}
}
}
let prevent = function() {
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
return false;
};
if(selector.scrollTop === 0 && delta < 0){
return prevent();
}
else if(selector.scrollTop === (selector.scrollHeight - selector.clientHeight) && delta > 0){
return prevent();
}
};
selector.onwheel = e => {MouseWheelHandler(e, selector)};
selector.onmousewheel = e => {MouseWheelHandler(e, selector)};
selector.ontouchmove = e => {MouseWheelHandler(e, selector)};
}
答案 22 :(得分：0)
值得一提的是，使用reactJS，AngularJS，VueJS等现代框架，在处理固定位置元素时，可以轻松解决这个问题。例如侧板或重叠元件。
这种技术被称为“门户”，这意味着应用程序中使用的组件之一，无需从您使用它的地方实际提取它，将其子项安装在body元素的底部，在父母之外，你试图避免滚动。
请注意，它不会避免滚动body元素本身。您可以结合使用此技术并在滚动div中安装应用程序以获得预期效果。
React的材料-ui中的Portal实现示例：https://material-ui-next.com/api/portal/
答案 23 :(得分：0)
当鼠标悬停在可滚动元素上时，还有一个有趣的技巧来锁定父级scrollTop。这样您就不必实现自己的滚轮滚动。
以下是防止文档滚动的示例，但可以针对任何元素进行调整。
scrollable.mouseenter(function ()
{
var scroll = $(document).scrollTop();
$(document).on('scroll.trap', function ()
{
if ($(document).scrollTop() != scroll) $(document).scrollTop(scroll);
});
});
scrollable.mouseleave(function ()
{
$(document).off('scroll.trap');
});
答案 24 :(得分：0)
不要在overflow: hidden;上使用body。它会自动将所有内容滚动到顶部。也不需要JavaScript。利用overflow: auto;：
<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;
}
使用演示here播放。
答案 25 :(得分：0)
我能找到的最佳解决方案是在窗口上侦听滚动事件，如果子div可见，则将scrollTop设置为上一个scrollTop。
prevScrollPos = 0
$(window).scroll (ev) ->
if $('#mydiv').is(':visible')
document.body.scrollTop = prevScrollPos
else
prevScrollPos = document.body.scrollTop
如果你发送了很多滚动事件，那么子div的背景会有一个闪烁，所以这可以调整，但很难被注意到，这对我的用例就足够了。
答案 26 :(得分：0)
jQuery插件，模拟Internet Explorer的自然滚动
$.fn.mousewheelStopPropagation = function(options) {
options = $.extend({
// defaults
wheelstop: null // Function
}, options);
// Compatibilities
var isMsIE = ('Microsoft Internet Explorer' === navigator.appName);
var docElt = document.documentElement,
mousewheelEventName = 'mousewheel';
if('onmousewheel' in docElt) {
mousewheelEventName = 'mousewheel';
} else if('onwheel' in docElt) {
mousewheelEventName = 'wheel';
} else if('DOMMouseScroll' in docElt) {
mousewheelEventName = 'DOMMouseScroll';
}
if(!mousewheelEventName) { return this; }
function mousewheelPrevent(event) {
event.preventDefault();
event.stopPropagation();
if('function' === typeof options.wheelstop) {
options.wheelstop(event);
}
}
return this.each(function() {
var _this = this,
$this = $(_this);
$this.on(mousewheelEventName, function(event) {
var origiEvent = event.originalEvent;
var scrollTop = _this.scrollTop,
scrollMax = _this.scrollHeight - $this.outerHeight(),
delta = -origiEvent.wheelDelta;
if(isNaN(delta)) {
delta = origiEvent.deltaY;
}
var scrollUp = delta < 0;
if((scrollUp && scrollTop <= 0) || (!scrollUp && scrollTop >= scrollMax)) {
mousewheelPrevent(event);
} else if(isMsIE) {
// Fix Internet Explorer and emulate natural scrolling
var animOpt = { duration:200, easing:'linear' };
if(scrollUp && -delta > scrollTop) {
$this.stop(true).animate({ scrollTop:0 }, animOpt);
mousewheelPrevent(event);
} else if(!scrollUp && delta > scrollMax - scrollTop) {
$this.stop(true).animate({ scrollTop:scrollMax }, animOpt);
mousewheelPrevent(event);
}
}
});
});
};
答案 27 :(得分：0)
我正在为MooTools寻找这个，这是第一个出现的。 最初的MooTools示例可以向上滚动，但不能向下滚动，所以我决定写这个。
var stopScroll = function (e) {
var scrollTo = null;
if (e.event.type === 'mousewheel') {
scrollTo = (e.event.wheelDelta * -1);
} else if (e.event.type === 'DOMMouseScroll') {
scrollTo = 40 * e.event.detail;
}
if (scrollTo) {
e.preventDefault();
this.scrollTo(0, scrollTo + this.scrollTop);
}
return false;
};
<强>用法：
(function)($){
window.addEvent('domready', function(){
$$('.scrollable').addEvents({
'mousewheel': stopScroll,
'DOMMouseScroll': stopScroll
});
});
})(document.id);
答案 28 :(得分：-1)
使用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();
}
});
答案 29 :(得分：-2)
你可以这样试试：
$('#element').on('shown', function(){
$('body').css('overflow-y', 'hidden');
$('body').css('margin-left', '-17px');
});
$('#element').on('hide', function(){
$('body').css('overflow-y', 'scroll');
$('body').css('margin-left', '0px');
});