javascript - 在 Android 手机上滚动不起作用

Question

我试图让我的网站响应。但无论我滚动多少，它仍然让我保持在同一个 div 元素上。我正在使用一个名为 jquery-momentum-scroll.js 的插件和一个名为 vide.js 的插件。覆盖整体的 wrapper 如下-

#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;
}

我试过删除“position: fixed;”属性，但仍然没有解决问题。但是当我调整浏览器大小时，它显示正常。网站的链接如下 -

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

Answer 1

无论您滚动到哪里，#main 部分都会接管视口(viewport)的原因是因为您正在使用 position: fixed; 来定位元素。

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

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

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

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