Question

在移动设备上，当屏幕上显示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;
}

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

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

Answer 1

background:fixed

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

当用户在固定位置div上滚动时，防止身体滚动

1 个答案: