在 Android Mobile 上滚动不起作用

Question

我正在尝试使我的网站具有响应性。但无论我滚动多少，它仍然让我保持在同一个 div 元素上。我正在使用一个名为 jquery-momentum-scroll.js 的插件和一个名为 vide.js 的插件。下面给出了覆盖整个的包装器-

#main {
    height: inherit;
    bottom: 0px;
    transition: transform 1.2s ease-out;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    padding: 0px;
    z-index: 2;
    display: block;
    backface-visibility: hidden;
}`

下面给出了无论我滚动多少都显示的元素-

#banner_wrapper {
    margin-top: 55px;
    width: 100%;
    height: 900px;
    position: relative;
    top: 0;
    left: 0;
    opacity: 0.4;
    z-index: 0;
}

我已尝试删除“位置：固定；”属性，但仍然没有解决问题。但是当我调整浏览器大小时，它显示正常。该网站的链接如下-

https://robustious-methods.000webhostapp.com/

Answer 1

#main 部分接管视口（无论您滚动到哪里）的原因是因为您使用position: fixed; 来定位元素。

使用position: fixed，这会将元素从文档流中取出，并相对于屏幕固定它。在这种情况下，您已将其设置为占用 100% 的宽度并在样式中使用 top: 0; bottom: 0;，您是在告诉它也占用 100% 的高度。

如果您想保留文档流中的元素，请将#main 选择器上的position: fixed 更改为position: relative;，或将其完全删除。

如果您想保留全高横幅，请在 #banner_wrapper 选择器中删除 height: 900px; 并添加 height: 100vh;。

更多关于 CSS 定位的阅读here。