当用户滚动固定位置的div时，防止页面滚动

Question

当用户滚动固定位置的div时，防止页面滚动

3

在移动设备上，当一个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设备上尝试过了。如何解决这个问题？

- user1452062

有相关的解决方案吗？使用CSS方法解决会很好。 - Asim K T

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aalok Mishra · Answer 1

background:fixed

将使页面其余部分滚动固定元素。这是默认行为。从外观上看，您希望将固定元素定位在页面顶部。为什么不将其保留为单独的容器，使用绝对位置，并将页面其余部分放在另一个容器中。然后，在保持HTML、body高度为100%的情况下，为其余部分添加滚动条。您可能需要为第二个容器保持高度固定。