防止滚动元件从鼓泡向窗口(prevent Scroll bubbling from element

我有一个包含一个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

我想你得离开这件事到浏览器的作者来解决。 火狐（3.5在Linux上，反正）似乎有一个更适合我的行为：如果孩子已经在你开始使用滚轮的时刻顶/底端，只滚动父。

Answer 2:

如果我们不能阻止窗口滚动，为什么不取消？ 也就是说，捕捉滚动事件，然后滚动返回到固定位置。

下面的代码，只要一个悬停在锁定Y轴$("#popup")

// here we store the window scroll position to lock; -1 means unlocked
var forceWindowScrollY = -1;

$(window).scroll(function(event) {
  if(forceWindowScrollY != -1 && window.scrollY != forceWindowScrollY) {
    $(window).scrollTop(forceWindowScrollY);    
  }
});

$("#popup").hover(function() {
  if(forceWindowScrollY == -1) {
    forceWindowScrollY = $(window).scrollTop();
  }
}, function() {
  forceWindowScrollY = -1;
});

我用这个查询建议上盒http://bundestube.de/ （输入一些字符到顶部的搜索框，使滚动窗格可见）：

这完美的作品在Chrome / Safari浏览器（WebKit），因此，在Firefox和Opera的一些滚动毛刺。 出于某种原因，它不与我的IE安装工作。 我想这与jQuery的悬停的方法，这似乎不是在所有情况下都100％正确的工作要做。

Answer 3:

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

 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> 

简单适用的滚动应“锁定”到的元件和滚动事件对样式属性不会冒泡到可能有一个带滑轮以及任何父元素。

---

同样的demo，如上但没有绝招：

 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> 

Answer 4:

我知道这是一个很古老的问题，但由于这是在谷歌上面结果一个......我不得不以某种方式取消滚动没有jQuery的起泡和此代码的工作对我来说：

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
    e.preventDefault();
  e.returnValue = false;  
}

document.getElementById('a').onmousewheel = function(e) { 
  document.getElementById('a').scrollTop -= e. wheelDeltaY; 
  preventDefault(e);
}

Answer 5:

我的jQuery插件：

$('.child').dontScrollParent();

$.fn.dontScrollParent = function()
{
    this.bind('mousewheel DOMMouseScroll',function(e)
    {
        var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;

        if (delta > 0 && $(this).scrollTop() <= 0)
            return false;
        if (delta < 0 && $(this).scrollTop() >= this.scrollHeight - $(this).height())
            return false;

        return true;
    });
}

Answer 6:

这就是我解决了这个问题：

我拨打以下，当我打开弹出：

$('body').css('overflow','hidden');

然后，当我关闭弹出我称之为：

$('body').css('overflow','auto');

弹出窗口，就是要模态所以没有互动需要与底层体

工作得很好

Answer 7:

显然，你可以设置overflow:hidden ，防止滚动 。 不知道怎么样，如果文档已经被滚动的是会去。 我也是在无鼠标的笔记本电脑，所以对我来说没有scrolly轮测试今晚:-)这也许值得一试，但。

Answer 8:

你可以尝试jscroll窗格中的iframe中替换默认滚动。

http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

我不知道，但尝试一下

Answer 9:

这是我做的：

  $('.noscroll').on('DOMMouseScroll mousewheel', function(ev) {
     var prevent = function() {
         ev.stopPropagation();
         ev.preventDefault();
         ev.returnValue = false;
         return false;
     }
     return prevent();
  }); 

演示小提琴

使用CSS overflow:hidden隐藏滚动条，就好像它们拖动它，这将什么也不做。

工程跨浏览器

Answer 10:

新的Web开发这里。 这工作就像一个魅力对我来说两个IE和Chrome。

static preventScrollPropagation(e: HTMLElement) {
    e.onmousewheel = (ev) => {
        var preventScroll = false;
        var isScrollingDown = ev.wheelDelta < 0;
        if (isScrollingDown) {
            var isAtBottom = e.scrollTop + e.clientHeight == e.scrollHeight;
            if (isAtBottom) {
                preventScroll = true;
            }
        } else {
            var isAtTop = e.scrollTop == 0;
            if (isAtTop) {
                preventScroll = true;
            }
        }
        if (preventScroll) {
            ev.preventDefault();
        }
    }
}

不要让行数骗你，这是很简单 - 只是有点冗长的可读性（自我记录代码FTW吧？）

Answer 11:

我想补充一点更新的代码，我发现最好的工作：

var yourElement = $('.my-element');

yourElement.on('scroll mousewheel wheel DOMMouseScroll', function (e) {
    var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;

    if (delta > 0 && $(this).scrollTop() <= 0)
        return false;
    if (delta < 0 && $(this).scrollTop() >= this.scrollHeight - $(this).outerHeight())
        return false;

    return true;
});

那是上面已经提到这一个又一个的区别是增加了更多的事件和outerHeight（的使用），而不是高度（），以避免崩溃，如果元素具有填充！

Answer 12:

$('.scrollable').on('DOMMouseScroll mousewheel', function (e) {
    var up = false;
    if (e.originalEvent) {
        if (e.originalEvent.wheelDelta) up = e.originalEvent.wheelDelta / -1 < 0;
        if (e.originalEvent.deltaY) up = e.originalEvent.deltaY < 0;
        if (e.originalEvent.detail) up = e.originalEvent.detail < 0;
    }

    var prevent = function () {
        e.stopPropagation();
        e.preventDefault();
        e.returnValue = false;
        return false;
    }

    if (!up && this.scrollHeight <= $(this).innerHeight() + this.scrollTop + 1) {
        return prevent();
    } else if (up && 0 >= this.scrollTop - 1) {
        return prevent();
    }
});

Answer 13:

截至目前，2018年及以后e.preventDefault就够了。

$('.elementClass').on("scroll", function(e){
    e.preventDefault();
 }); 

这将防止滚动父。

Answer 14:

function stopPropogation(e)
{
    e = e || window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
}

这应该工作。

文章来源: prevent Scroll bubbling from element to window