当用户在固定位置 div 上滚动时防止正文滚动答案

【问题标题】：Prevent body scrolling when the user scrolls on fixed position div当用户在固定位置 div 上滚动时防止正文滚动
【发布时间】：2015-08-24 22:11:57
【问题描述】：

在移动设备上，当屏幕上出现position:fixed; 元素时，用户可以滚动<body>，通过固定元素。

body,
html{
    overflow: hidden;
    margin: 0;
    padding: 0;
}

#fixed {
    background: red;
    position: fixed;
    left:0;
    top: 0;
    width: 200px;
    height: 100%;
}

#content {
    background: blue;
    height: 3000px;
}

我尝试为<html> 和<body> 添加overflow:hidden，但没有帮助。我想阻止滚动固定元素，但我想允许滚动，当固定元素可见但用户滚动<body>。

我在 ios 和 android 设备上试过这个。解决这个问题的最佳解决方案是什么？

【问题讨论】：

对此有任何答案吗？只有 CSS 的解决方案会很棒。

标签： html css scroll

【解决方案1】：

background:fixed

将使正文的其余部分滚动通过固定元素。这是默认行为。从外观上看，您希望将固定元素定位在页面顶部。为什么不把它放在一个单独的容器中，绝对位置和身体的其余部分在不同的容器中。然后，将滚动添加到正文的其余部分，保持 HTML，正文高度为 100%。您可能需要保持第二个容器的高度固定。

【讨论】：

这与背景无关。我想防止在 body 上滚动。
您能否分享您的问题的工作链接。提供准确的答案将有很大帮助