Question

当前，我正在为我的女友在一个网站上工作，我遇到的问题是页面上有一个滚动条，但是即使内容在页面外溢出，也不允许我上下滚动页面。如果有帮助，我正在为此项目使用Brackets IDE。

 body {

      background-color: rgb(66, 197, 244);
      overflow-y: scroll;
      overflow-x: hidden;
}

这是我的body标签使用的CSS代码。有什么我想念的东西还是需要添加的东西？

Answer 1

欢迎来到StackOverflow。不，你很好。也许没有足够的内容来滚动。

body {
  background-color: rgb(66, 197, 244);
  overflow-y: scroll;
  overflow-x: hidden;
}

<div>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>

</div>

Answer 2

如果您说内容溢出，那么它也可能会丢失html标签上的overflow属性（或其他可能具有尺寸并包含您内容的包装器）。而且，就像大多数人已经说过的那样，如果您在溢出属性上使用滚动值，即使您没有任何内容可以创建溢出，它也会始终向您显示滚动条。要仅在确实需要滚动条时才使用滚动条，应将“ scroll”替换为“ auto”。

Answer 3

设置overflow-y: scroll;时，即使没有要滚动的内容，它也会始终显示滚动条。

检查此链接以获取更多信息https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

您只需要在页面上添加更多内容或缩小窗口的垂直尺寸即可。

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  overflow: hidden;
}
div {
  height: 100vh;
  overflow-y: scroll;
}
.blue {
  border: 1px solid blue;
  background: lightblue;
}
.red {
  border: 1px solid red;
  background: tomato;
}

<div class="blue half">
  <p>No Content</p>
</div>
<div class="red half">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

滚动条在那里，但是页面没有滚动

3 个答案: