不需要时如何使滚动条消失？答案

【问题标题】：How to make scrollbar disappear when not needed?不需要时如何使滚动条消失？
【发布时间】：2016-05-11 15:09:40
【问题描述】：

我正在尝试为多种尺寸的屏幕设置响应式网站，例如引导大小 xs、sm、md 和 lg。

在三个较小的尺寸上一切正常，即滚动条仅在需要时出现在右侧。

但是，在 大尺寸屏幕 上，它的宽度为 1024 像素，因此不会变得太宽，我怎样才能让垂直滚动条只在需要时出现?

较小的尺寸可以：

LARGE SIZE 在不需要时有不必要的滚动条：

.pagecontent {
  margin: 0 18px;
}
/* bootstrap override */

.container {
  width: 100%;
  padding: 0;
}
.navbar {
  border-radius: 0px;
}
.navbar-text {
  float: left !important;
  margin-right: 10px;
}
.navbar-right {
  float: right!important;
}
.navbar-nav>li>a {
  padding-top: 15px;
  padding-bottom: 15px;
}
.navbar-nav {
  margin-bottom: 0;
  margin-top: 0;
  margin-left: 0;
}
.container {
  width: 1024px;
  padding: 0;
  background-color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: scroll;
}
html {
  min-height: 100%;
  /* make sure it is at least as tall as the viewport */
  position: relative;
}
body {
  height: 100%;
  /* force the BODY element to match the height of the HTML element */
  background-color: #999;
}

<!DOCTYPE html>
<html>

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

  <div class="container">
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header pull-left">
          <a class="navbar-brand" href="?">Bootstrap Showcase</a>
        </div>

      </div>
    </nav>
    <div class="pagecontent">

      <div>this is a test line</div>
      <div>this is a test line</div>
      <div>this is a test line</div>
      <div>this is a test line</div>
      <div>this is a test line</div>
      <div>this is a test line</div>
      <div>this is a test line</div>
      <div>this is a test line</div>
      <div>this is a test line</div>
      <div>this is a test line</div>
      <div>this is a test line</div>
      <div>this is a test line</div>
      <div>this is a test line</div>
      <div>this is a test line</div>
      <div>this is a test line</div>
      <div>this is a test line</div>
      <div>this is a test line</div>
      <div>this is a test line</div>

    </div>
  </div>
</body>

</html>

附录：

如果我删除overflow-y: scroll，我会看到右侧的滚动条，但内容会在底部之前延伸：

【问题讨论】：

所以您的屏幕截图与您提供给我们的代码所产生的不完全一样...。您是否有理由使用此包装器而不是在 body 上使用 padding 之类的东西和让包装器流入？

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

使用overflow-y: auto; CSS 属性。然后它只在需要时显示滚动条

【讨论】：

留下我的 +1，因为这解决了（原始）问题，但实际上并没有解决问题，因为有人 cough 没有提供足够的代码让我们意识到这个问题还有很多。
没错，这就是为什么我将此答案标记为正确并在这里提出一个新问题：stackoverflow.com/questions/37167577/…

【解决方案2】：

从 css 中的 .container 中删除 overflow-y: scroll;。为什么container 类在 CSS 中列出了两次？

【讨论】：

如果他把它拿掉，他想要的时候就没有了
为什么不呢？如果滚动经过页面，浏览器将包含滚动条。
我以前做过类似的事情。 CSS 可重用的 sn-ps（例如，CSS Accordion 的引擎）和样板文件经常得到这种处理，而不是与视觉样式混合在一起。但是，这种情况可能只是来自“嵌入”外部样式表。
@RhysO 是的，auto 的行为似乎是默认的，但事实并非如此。原因是您通常希望元素拉伸而不是切换到滚动条。 visible 实际上是从浏览器的 pov 中做出的选择。
@abluejelly，但是 RhysO 对auto 的回答是一个很好的解决方案，但是当滚动条可见时，它位于容器的右侧而不是浏览器的右侧。如果滚动条在浏览器的右侧会更好，否则鼠标滚轮在灰色区域不起作用，这会给用户带来不必要的尴尬浏览器体验。