我一直在寻找一个“灯箱”类型的解决方案,允许这一点,但还没有找到一个(请建议,如果你知道任何)。

我试图重现的行为就像你在Pinterest上点击图片时看到的一样。覆盖层是可滚动的(整个覆盖层向上移动,就像一页在一页的顶部),但覆盖层后面的主体是固定的。

我试图用CSS创建这个(即一个div覆盖在整个页面和身体溢出:隐藏),但它不阻止div是可滚动的。

如何保持主体/页面从滚动,但保持滚动在全屏容器内?


当前回答

就我而言,这些解决方案都不适用于iPhone (iOS 11.0)。

在我的所有设备上唯一有效的修复是这个- ios-10-safari-prevent-scroll -behind-a-fixed-overlay-and-maintain-scroll-position

其他回答

值得注意的是,有时在body标签上添加"overflow:hidden"并不能完成这项工作。在这些情况下,您还必须将属性添加到html标记中。

html, body {
    overflow: hidden;
}

使用以下HTML:

<body>
  <div class="page">Page content here</div>
  <div class="overlay"></div>
</body>

然后用JavaScript拦截并停止滚动:

$(".page").on("touchmove", function(event) {
  event.preventDefault()
});

然后让事情恢复正常:

$(“.page”).off(“touchmove”);

我发现这个问题试图解决我在Ipad和Iphone上的页面问题-当我显示固定div为弹出图像时,身体正在滚动。

有些答案很好,但没有一个解决了我的问题。我找到了下面这篇由Christoffer Pettersson撰写的博文。解决方案提出了帮助问题,我与iOS设备,它帮助我的滚动背景问题。

关于iOS Safari的橡皮筋滚动,我了解到了6件事

正如建议的那样,我包括博客文章的主要观点,以防链接过时。

为了禁止用户在“菜单打开”时滚动后台页面,可以通过应用一些JavaScript和CSS类来控制应该允许滚动或不允许滚动哪些元素。

基于这个Stackoverflow答案,您可以控制禁用滚动的元素不应该 当touchmove事件被触发时,执行默认的滚动操作。”

 document.ontouchmove = function ( event ) {

    var isTouchMoveAllowed = true, target = event.target;

    while ( target !== null ) {
        if ( target.classList && target.classList.contains( 'disable-scrolling' ) ) {
            isTouchMoveAllowed = false;
            break;
        }
        target = target.parentNode;
    }

    if ( !isTouchMoveAllowed ) {
        event.preventDefault();
    }
};

然后把禁用滚动类放到页面div上:

<div class="page disable-scrolling">

就我而言,这些解决方案都不适用于iPhone (iOS 11.0)。

在我的所有设备上唯一有效的修复是这个- ios-10-safari-prevent-scroll -behind-a-fixed-overlay-and-maintain-scroll-position

要防止的行为称为滚动链接。要禁用它,请设置

overscroll-behavior: contain;

在你的CSS覆盖。