到达 iFrame 底部时不要滚动网页答案

【问题标题】：Don't scroll webpage when reached bottom of iFrame到达 iFrame 底部时不要滚动网页
【发布时间】：2023-04-05 15:09:01
【问题描述】：

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

我做了一个快速的 JSFiddle 来演示这个问题：http://jsfiddle.net/fbgxf771/1/

<div class="whole-page" style="height:2000px;"> 
    <iframe style="height: 100px;" src="http://example.com"></iframe>
</div>

在 div 或 iframe 上继续向下滚动，当您到达底部时，整个页面将向下滚动。

如何禁用它？

【问题讨论】：

你想达到什么目的？
在你的小提琴中没有 iframe
另一种表达问题的方式是“当焦点位于可滚动的子元素中时，如何禁用父元素的滚动”。听起来很有趣。
您应该始终仔细考虑是否要更改此行为。假设您有一个仅支持触摸手势的设备并且您阻止了页面的滚动，那么您可能会将用户锁定在div/iframe 的范围内。 Generell 在更改滚动条的行为或滚动时应格外小心，因为大多数情况下会严重损害可用性。
相关：How to disable scrolling temporarily?

标签： javascript jquery html css iframe

【解决方案1】：

你可以这样接近它

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

这是一个小提琴：http://jsfiddle.net/m4feddh1/

【讨论】：

【解决方案2】：

$('.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();
    }
});

成功了

【讨论】：