我一直在寻找一个"灯箱"类型的解决方案,允许这个但尚未找到一个(请,如果您知道任何,请建议).
我正在尝试重新创建的行为就像您在点击图片时在Pinterest上看到的那样.叠加层是可滚动的(因为整个叠加层像页面顶部的页面一样向上移动),但叠加层后面的主体是固定的.
我试图用CSS创建它(即div在整个页面和主体上面叠加overflow: hidden),但它不会阻止div可滚动.
如何防止正文/页面滚动但仍在全屏容器内滚动？
是否overflow:hidden适用<body>于iPhone Safari？似乎没有.我无法在整个网站上创建一个包装器来实现这一点......
你知道解决方案吗？
示例:我有一个长页面,只是我想要隐藏"折叠"下面的内容,它应该适用于iPhone/iPad.
我知道这个问题已经被问过十几次了，但这些问题的解决方案都不适合我。
我希望 iOS 13 Safari 上的 body 元素不滚动。这意味着没有滚动，也没有弹性反弹（溢出滚动）效果。
我设置了两个彼此相邻的元素overflow: scroll;，它们应该滚动，只是它们周围的主体不应该滚动。
我尝试过的所有解决方案都不适用于头部带有以下标签并保存到主屏幕的渐进式网络应用程序。
<meta name="apple-mobile-web-app-capable" content="yes">
尝试 1：设置隐藏在正文和/或 html 上的溢出。不适用于 iOS 13 Safari。
html {
position: relative;
overflow: hidden;
height: 100%;
}
body {
position: relative;
overflow: hidden;
height: 100%;
}
在 iOS 13 safari 中什么都不做，但在 macOS safari 和 Firefox 中有效。
尝试2：固定在身体上的设置位置。对我不起作用，因为当用户滚动时，主体不会，但滚动仍然阻止我的两个内部元素在溢出反弹动画时滚动。
body {
position: fixed;
}
只将正文放在页面滚动上。滚动（溢出滚动）通过固定体发生......
尝试 3：防止默认触摸移动。没有用（是一个较旧的解决方案......）。
document.addEventListener("touchmove", function (e) {
e.preventDefault();
}, { passive: false });
我什么都不做。不是在 safari …
在元素内部position: fixed;，如果您尝试在触摸开始时以错误的方式滚动滚动元素，滚动元素将“锁定”。
示例：触摸屏幕并向下拖动，然后向后拖动。该元素不会滚动。如果松开，等待几秒钟，然后尝试向上拖动，它就会滚动。
http://12me21.github.io/scroll-test.html
body {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#scroll-container {
overflow-y: scroll;
height: 100%;
}
#scroller {
height: 200vh;
font-size: 50px;
}<body>
<div id=scroll-container>
<div id=scroller>Test<br>more text</div>
</div>
</body>这个答案：/sf/answers/3621311851/似乎与我遇到的问题相同，但修复不再有效。它似乎发生在所有固定元素内，并且不再由其引起-webkit-overflow-scrolling: touch;。
现在有办法解决这个问题吗？或者我只需要完全避免position: fixed;？