防止身体滚动，但允许覆盖滚动

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

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

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

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

当前回答

CSS

.noScroll {
    overflow: hidden;
}

Javascript

<script>
    function toggleNav() {
        document.body.classList.toggle("noScroll");
    }
</script>

按钮

<button onclick="toggleNav()">
 Toggle Nav
</button>

其他回答

对于触摸设备，尝试在覆盖的包装中添加一个1px宽，101vh min-height的透明div。然后添加-webkit-overflow-scrolling:touch;overflow-y:汽车;对包装。这将使移动safari误以为覆盖层是可滚动的，从而拦截来自主体的触摸事件。

这是一个示例页面。在移动safari上打开:http://www.originalfunction.com/overlay.html

https://gist.github.com/YarGnawh/90e0647f21b5fa78d2f678909673507f

使用以下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”）;

如果有人正在寻找React函数组件的解决方案，你可以把它放在模态组件中:

 useEffect(() => {
    document.body.style.overflowY = 'hidden';
    return () =>{
      document.body.style.overflowY = 'auto';
    }
  }, [])

你可以用一些“新”css和JQuery轻松做到这一点。

初始:body{…溢出:汽车;} 使用JQuery，你可以在“overlay”和“body”之间动态切换。当使用“body”时，使用

body {
   position: static;
   overflow: auto;
}

在“叠加”时使用

body {
   position: sticky;
   overflow: hidden;
}

JQuery for switch('body'->'overlay'):

$("body").css({"position": "sticky", "overflow": "hidden"});

JQuery for switch('overlay'->'body'):

$("body").css({"position": "static", "overflow": "auto"});

body标签的简单内联样式:

<body style="position: sticky; overflow: hidden;">

推荐文章