防止滚动从元素冒泡到窗口 [英] prevent Scroll bubbling from element to window

问题描述

我有一个模态框窗口（弹出窗口），其中包含一个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（）; 就足够了...

解决方案

解决使用简单的CSS属性（对于现代浏览器）：结果反弹时行为

  body {身高：600px; overflow：auto;} section {width：50％;身高：50％;溢出：自动;背景：浅蓝色; overscroll-behavior：none; / *< --- the trick * /} section :: before {content：'';身高：200％; display：block;}  

 < section> < input value ='end'/>< / section>  

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

---

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

< DIV类=段数据琅=JS数据隐藏=真数据的控制台=真的数据巴贝尔=假>

  body {height：600px; overflow：auto;} section {width：50％;身高：50％;溢出：自动; background：lightblue;} section :: before {content：'';身高：200％; display：block;}  

 < section> < input value ='end'/>< / section>  

I have a modal box window (pop-up) that contains an iframe,
and inside that iframe there's a div that is scrollable.

When I scroll the iframe's inner DIV, and it has reached its top or bottom limit,
the window of the browser itself starts to scroll. this is an unwanted behavior.

I've tried something like this, which kills the main window scroll when
onMouseEnter when mouse enters pop-up box area:

e.preventDefault() is not working as it should for some reason...

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

Update

Seems like now in 2013 e.preventDefault(); is enough...

解决方案

Solved (for modern browsers) using a simple CSS property:
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>

Simply apply that style property on the element which the scroll should be "locked-in" to and the scroll event will not bubble up to any parent element which might have a scroll as well.

---

Same demo as above but without the trick:

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>

这篇关于防止滚动从元素冒泡到窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！