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

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

使用简单的CSS属性解决了（对于 某些 浏览器）：overscroll-behavior

body{

  height: 600px;

  overflow: auto;

}



section{

  width: 50%;

  height: 50%;

  overflow: auto;

  background: lightblue;

  overscroll-behavior: none; /*   <--- the trick    */

}



section::before{

  content: '';

  height: 200%;

  display: block;

}


<section>

 <input value='end' />

</section>

只需将样式属性应用到滚动应该“锁定”到的元素上，滚动事件就不会冒泡到任何可能具有滚动的父元素。

与上面相同的演示，但 没有 技巧：

body{

  height: 600px;

  overflow: auto;

}



section{

  width: 50%;

  height: 50%;

  overflow: auto;

  background: lightblue;

}



section::before{

  content: '';

  height: 200%;

  display: block;

}


<section>

 <input value='end' />

</section>