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

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  No

Bubbles     No

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

Answer 2

使用简单的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>