防止从元素到窗口滚动冒泡 [英] 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(函数(){$(window).unbind("滚动");});

更新

现在好像在 2013 年 e.preventDefault(); 就够了...

解决方案

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

<块引用>

自动默认滚动溢出行为正常发生.

<块引用>

包含在设置此值的元素内部观察到默认滚动溢出行为(例如弹跳"效果或刷新)，但相邻滚动区域不会发生滚动链接，例如底层元素不会滚动.

<块引用>

无相邻滚动区域不会发生滚动链接，并防止默认滚动溢出行为.

body{高度:600px；溢出:自动；}部分{宽度:50%；高度:50%；溢出:自动；背景:浅蓝色；过度滚动行为:无；/* <--- 技巧 */}部分::之前{内容: '';高度:200%；显示:块；}

<输入值='结束'/></section>

只需将该样式属性应用到应该锁定"滚动条的元素上即可.to 并且滚动事件不会冒泡到任何可能也有滚动的父元素.

---

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

body{高度:600px；溢出:自动；}部分{宽度:50%；高度:50%；溢出:自动；背景:浅蓝色；}部分::之前{内容: '';高度:200%；显示:块；}

<输入值='结束'/></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 some browsers) using a simple CSS property:
overscroll-behavior:

auto The default scroll overflow behavior occurs as normal.

contain Default 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.

none No 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>

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屋！