防止滚动从元素滚动到窗口

Question

我有一个模态框窗口（弹出窗口），其中包含一个iframe，

并且在该iframe中有一个可滚动的div。

当我滚动iframe的内部DIV并达到其上限或下限时，

浏览器本身的窗口就会开始滚动。这是不想要的行为。

我已经尝试过类似的方法，

当鼠标进入弹出框区域时，该方法会在onMouseEnter时杀死主窗口滚动：

e.preventDefault（）由于某些原因无法正常工作...

$("#popup").mouseenter(function(){

   $(window).bind("scroll", function(e){

        e.preventDefault();

   }); 

}).mouseleave(function(){

    $(window).unbind("scroll");

});

更新资料

似乎现在2013年e.preventDefault();就足够了...

Answer 1

抱歉，据我所知，无法取消任何滚动事件。无论W3和MSDN说：Cancelable  NoBubbles     No我认为您必须将这个问题留给浏览器作者来解决。Firefox（无论如何，在Linux上为3.5）对我来说似乎都有更好的表现：在您开始使用滚轮时，如果子代已经位于顶端/底端，它只会滚动父代。

Answer 2

使用简单的CSS属性解决了（对于某些浏览器）：overscroll-behaviorbody{&nbsp; height: 600px;&nbsp; overflow: auto;}section{&nbsp; width: 50%;&nbsp; height: 50%;&nbsp; overflow: auto;&nbsp; background: lightblue;&nbsp; overscroll-behavior: none; /*&nbsp; &nbsp;<--- the trick&nbsp; &nbsp; */}section::before{&nbsp; content: '';&nbsp; height: 200%;&nbsp; display: block;}<section>&nbsp;<input value='end' /></section>只需将样式属性应用到滚动应该“锁定”到的元素上，滚动事件就不会冒泡到任何可能具有滚动的父元素。与上面相同的演示，但没有技巧：body{&nbsp; height: 600px;&nbsp; overflow: auto;}section{&nbsp; width: 50%;&nbsp; height: 50%;&nbsp; overflow: auto;&nbsp; background: lightblue;}section::before{&nbsp; content: '';&nbsp; height: 200%;&nbsp; display: block;}<section>&nbsp;<input value='end' /></section>