javascript - 防止滚动从元素冒泡到窗口

Question

我有一个包含 iframe 的模态框窗口(弹出窗口)，
在那个 iframe 里面有一个可滚动的 div。

当我滚动 iframe 的内部 DIV，并且它已达到其上限或下限时，
浏览器本身的窗口开始滚动。这是不需要的行为。

我试过这样的东西，当鼠标进入弹出框区域时
onMouseEnter 时，它会杀死主窗口滚动:

e.preventDefault() 由于某种原因没有正常工作...

$("#popup").mouseenter(function(){
   $(window).bind("scroll", function(e){
        e.preventDefault();
   }); 
}).mouseleave(function(){
    $(window).unbind("scroll");
});

Answer 1

使用简单的 CSS 属性解决(对于一些浏览器):
overscroll-behavior :

autoThe default scroll overflow behavior occurs as normal.

containDefault scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.

noneNo scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.

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>