Javascript Don'；当到达iFrame底部时，请不要滚动网页

当我使用滚动条到达iFrame/div的底部并继续向下滚动时，整个页面将向下滚动

我快速地做了一个JSFiddle来演示这个问题：

在div或iframe上保持向下滚动，当到达底部时，整个页面将向下滚动

---

我怎样才能禁用它？

你可以这样做

$('.inner-content-with-y-scroll').mouseenter(function(){
   $("body").css("overflow","hidden");
});
$('.inner-content-with-y-scroll').mouseleave(function(){
   $("body").css("overflow","scroll");
});

这是一把小提琴：

---

你想达到什么目的？在你的小提琴中没有另一种表达问题的方式，那就是“当焦点在可滚动的子元素中时，如何禁用在父元素上滚动”。听起来很有趣。你应该仔细考虑你是否想改变这种行为。假设您的设备只支持触摸手势，并且您阻止了页面的滚动，那么您可能会将用户锁定在该

div

/

iframe

中。一般来说，当你改变滚动条或滚动条的行为时，你应该非常小心，因为这在大多数情况下会严重损害可用性。与以下相关：

$('.inner-content-with-y-scroll').mouseenter(function(){
   $("body").css("overflow","hidden");
});
$('.inner-content-with-y-scroll').mouseleave(function(){
   $("body").css("overflow","scroll");
});

$('.inner-content-with-y-scroll').on('DOMMouseScroll mousewheel', function(ev) {
    var $this = $(this),
        scrollTop = this.scrollTop,
        scrollHeight = this.scrollHeight,
        height = $this.height(),
        delta = (ev.type == 'DOMMouseScroll' ?
            ev.originalEvent.detail * -40 :
            ev.originalEvent.wheelDelta),
        up = delta > 0;

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

    if (!up && -delta > scrollHeight - height - scrollTop) {
        // Scrolling down, but this will take us past the bottom.
        $this.scrollTop(scrollHeight);
        return prevent();
    } else if (up && delta > scrollTop) {
        // Scrolling up, but this will take us past the top.
        $this.scrollTop(0);
        return prevent();
    }
});