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

Stack Overflow用户

提问于 2019-02-10 20:06:23

回答 3查看 926关注 0票数 2

目前我正在为我的女朋友做一个网站，我遇到的问题是我在页面上有一个滚动条，但即使内容在页面之外溢出，它也不允许我在页面上上下滚动。如果它有帮助，我正在为这个项目使用支架IDE。

 body {

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

这是我的body标签的CSS代码。我是不是遗漏了什么或者我需要补充什么？

html

css

语音识别特惠，低至14.9元！

提供业界非常具有性价比的语音识别服务，超高识别准确率，适用多场景

回答 3

Stack Overflow用户

发布于 2019-02-10 20:14:37

欢迎使用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>

票数 1

Stack Overflow用户

发布于 2019-02-10 20:18:09

如果你说你有内容溢出，它可能也缺少html标签上的overflow属性(或者其他一些可能有尺寸并包含你的内容的包装器)。而且，正如大多数人已经说过的，如果您在overflow属性上使用滚动值，它将始终显示滚动条，即使您没有任何内容创建溢出。要只在真正需要时才有滚动条，您应该将"scroll“替换为"auto”。

票数 1

Stack Overflow用户

发布于 2019-02-10 20:14:24

当您设置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>