防止从元素滚动“冒泡”到窗口
我有一个模式框窗口（popup），其中包含一个iframe，
在iframe里面有一个可滚动的div 。
当我滚动iframe的内部DIV，并达到其顶部或底部的限制，
浏览器本身的窗口开始滚动。 这是一个不想要的行为 。
我尝试过这样的事情，当主窗口滚动时，
当鼠标进入popup框区域时鼠标进入：
e.preventDefault（）不工作，因为它应该由于某种原因…
$("#popup").mouseenter(function(){ $(window).bind("scroll", function(e){ e.preventDefault(); }); }).mouseleave(function(){ $(window).unbind("scroll"); }); 更新
看起来像现在在2013 e.preventDefault(); 足够…
对不起，据我所知，这是不可能取消任何forms的滚动事件。
W3和MSDN都说：
Cancelable No Bubbles No
我想你不得不离开浏览器作者来解决这个问题。 火狐浏览器（在Linux上为3.5）似乎对我有更好的行为：只有当你开始使用滚轮的时候，孩子已经在顶端/底端，它才会滚动父级。
如果我们不能防止窗口滚动，为什么不撤消它？ 即捕获滚动事件，然后滚动回到固定的位置。
只要hover在$("#popup")之上，以下代码就会lockingY轴：
// here we store the window scroll position to lock; -1 means unlocked var forceWindowScrollY = -1; $(window).scroll(function(event) { if(forceWindowScrollY != -1 && window.scrollY != forceWindowScrollY) { $(window).scrollTop(forceWindowScrollY); } }); $("#popup").hover(function() { if(forceWindowScrollY == -1) { forceWindowScrollY = $(window).scrollTop(); } }, function() { forceWindowScrollY = -1; });
我在http://bundestube.de/上使用这个查询提示框（在顶部search框中input一些字符以使可滚动窗格可见）：;
这在Chrome / Safari（Webkit）中完美地工作，并在Firefox和Opera中出现一些滚动故障。 出于某种原因，它不适用于我的IE安装。 我想这与jQuery的hover方法有关，在所有情况下都不能正常工作。
我的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; }); }
我知道这是一个相当古老的问题，但因为这是谷歌的顶级成绩之一…我不得不以某种方式取消没有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); }
我想添加一些更新的代码，我发现最好的工作：
var yourElement = $('.my-element'); yourElement.on('scroll mousewheel wheel 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).outerHeight()) return false; return true; });
这个和上面已经提到的不同之处在于添加了更多的事件，并且使用outerHeight（）而不是height（）来避免元素有填充时的崩溃！
显然，你可以设置overflow:hidden以防止滚动 。 不知道如果文档已经滚动如何去。 我也在无鼠标笔记本电脑上，所以今晚没有我的滚轮testing:-)这可能是值得一试。
您可以尝试使用iframe中的jscroll窗格replace默认滚动条。
http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
我不确定，但试试看
这就是我所做的：
$('.noscroll').on('DOMMouseScroll mousewheel', function(ev) { var prevent = function() { ev.stopPropagation(); ev.preventDefault(); ev.returnValue = false; return false; } return prevent(); });
演示小提琴
使用CSS overflow:hidden来隐藏滚动条，因为如果拖动它，它将不会执行任何操作。
作品跨浏览器
新的web开发在这里。 这对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权利？）
$('.scrollable').on('DOMMouseScroll mousewheel', function (e) { var up = false; if (e.originalEvent) { if (e.originalEvent.wheelDelta) up = e.originalEvent.wheelDelta / -1 < 0; if (e.originalEvent.deltaY) up = e.originalEvent.deltaY < 0; if (e.originalEvent.detail) up = e.originalEvent.detail < 0; } var prevent = function () { e.stopPropagation(); e.preventDefault(); e.returnValue = false; return false; } if (!up && this.scrollHeight <= $(this).innerHeight() + this.scrollTop + 1) { return prevent(); } else if (up && 0 >= this.scrollTop - 1) { return prevent(); } });
这就是我解决问题的方法：
当我打开popup窗口时，我打电话给下面的人：
$('body').css('overflow','hidden');
然后，当我closurespopup窗口时，我打电话给：
$('body').css('overflow','auto');
popup是为了模态，所以不需要与基础体的交互
工作得很好
function stopPropogation(e) { e = e || window.event; e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); if (e.preventDefault) e.preventDefault(); }
这应该工作。
