javascript - 视口(viewport)问题/无滚动

Question

网站有问题，我读过 overflow-y: 可能是问题所在，但似乎不是。在较小的模式下查看时，某些站点似乎被切断，并且不允许滚动。 Bootstrap 的 css 会发生这种情况吗？我使用全屏图像作为背景，也许它会强制每个视口(viewport)查看完整图像

website

我可以发布 CSS，但它与上面的链接相同。非常感谢任何帮助。无计可施!

Answer 1

我通过三处更改解决了这个问题。首先，您需要更改 #home 的 css，如下所示:

#home {
  position: relative;
  margin: 0 auto;
  width: 100%;
  overflow: scroll;
  z-index: 2;
  background-size: cover;
}

这将为主要区域打开滚动，但不会为标题菜单打开滚动。也许这就是您想要的，但如果不是 - 我改变的第二件事是我将 menu-wrap 元素移动到 home 元素中。你应该(大致)以这样的方式结束:

<article id="home" class="active">
    <div id="menu-wrap"><!--html here --></div>
    <div class="proppage"><!--html here --></div>
    <!-- etc -->
</article>

这将使您更接近于让菜单随页面滚动，但要最终使其滚动，您不能将位置设置为 fixed。您实际上在这里寻找的是 absolute。请注意，fixed 将它保留在浏览器中的那个位置，而 absolute 将它保留在页面上的那个位置。具有此更改的更新后的 CSS 如下所示:

#menu-wrap {
  position: absolute;
  width: 100%;
  z-index: 1000;
  top: 0;
  left: 0;
  margin: 0 0px 0px 0px;
}

这与您可能正在寻找的内容非常接近。希望对您有所帮助!