滚动条不占空间

Question

我正在用html制作一个应用程序,我需要一个滚动条.但每当我添加一个时,它会将所有内容都移动到滚动条所需的空间.这搞砸了应用程序的布局.所以我需要一种方法让滚动条简单地叠加在页面顶部,这意味着页面仍然在它后面.我已经知道如何设置滚动条的样式以使背面透明,我只需要滚动条不占用任何空间.

提前致谢!

Answer 1

2021 更新 - 使用scrollbar-gutter

\n

CSSscrollbar-gutter属性允许作者为滚动条保留空间，防止随着内容的增长而发生不必要的布局更改，同时还避免在不需要滚动时出现不必要的视觉效果。

\n

body {\n  overflow-y: auto;\n  scrollbar-gutter: stable;\n}\n

\n

例子

\n

\n

Stack Snippets 和jsFiddle中的演示

\n

\r\n

\r\n

body {\n  padding: 16px;\n}\n.grid {\n    display: grid;\n    grid-template-columns: repeat(2, 273px);\n    grid-gap: 16px;\n}\n.card-header {\n  margin-bottom: 4px;\n  white-space: pre-line;\n  font-weight: bold;\n}\n.card-body {\n  overflow: auto;\n  border: 1px solid black;\n  height: 120px;\n  \n}\n.scrollbar-stable {\n  scrollbar-gutter: stable;\n}

\r\n

<h1><code>scrollbar-gutter</code> sample</h1>\n\n<div class="grid">\n\n  <div class="card">\n    <pre class="card-header">\noverflow: auto;\nscrollbar-gutter: auto;\n    </pre>\n    <div class="card-body">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol</div>\n  </div>\n  \n  <div class="card">\n    <pre class="card-header">\noverflow: auto;\nscrollbar-gutter: stable;\n    </pre>\n    <div class="card-body scrollbar-stable">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol</div>\n  </div>\n  \n  <div class="card">\n    <pre class="card-header">\noverflow: auto;\nscrollbar-gutter: auto;\n    </pre>\n    <div class="card-body">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol borking doggo with a long snoot for pats shibe long woofer very hand that feed shibe pats, vvv wow such tempt long woofer heckin fluffer. Long water shoob smol corgo sub woofer</div>\n  </div>\n  \n  <div class="card">\n    <pre class="card-header">\noverflow: auto;\nscrollbar-gutter: stable;\n    </pre>\n    <div class="card-body scrollbar-stable">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol borking doggo with a long snoot for pats shibe long woofer very hand that feed shibe pats, vvv wow such tempt long woofer heckin fluffer. Long water shoob smol corgo sub woofer</div>\n  </div>\n  \n</div>

\r\n

\r\n

\r\n

\n

进一步阅读

\n

\n
• 文档\n
  \n
  • 滚动条装订线 | MDN
  \n
  • 滚动条装订线 | 我可以用吗
  \n
  \n
\n
• 文章\n
  \n
  • 使用滚动条装订线防止滚动条导致不必要的布局变化
  \n
  • “scrollbar-gutter”CSS 属性的解释器。
  \n
  • 滚动条装订线 | CSS 技巧
  \n
  \n
\n
• 规格\n
  \n
  • CSS WG 博客 \xe2\x80\x93 分钟 Telecon 2021-08-04
  \n
  • CSS 溢出模块级别 3
  \n
  \n
\n
• 相关\n
  \n
  • HTML为滚动条保留空间
  \n
  • 防止滚动条增加 Chrome 上页面的宽度
  \n
  • Chrome 为滚动条保留空间，即使它是隐藏的
  \n
  • CSS 100% 宽度但避免滚动条
  \n
  \n
\n
• 或者，要使滚动条不占用空间，请参阅：\n
  \n
  • 隐藏滚动条，但仍然可以滚动
  \n
  \n
\n

\n

Answer 2

只需使用overlay属性而不是scroll，就像这样：

html {
    overflow-y: auto;
    overflow-y: overlay;
}

请注意，这是一个仅限 webkit 的属性。

Answer 3

如果不使用阴暗黑客,就无法在内容之上显示滚动条,但这并不是最好的主意,因为它会影响应用的可用性.如果滚动条位于内容之上,则可能隐藏链接/文本/等.

理想情况下,您的页面应该以这样的方式设置样式,使其适应不同的浏览器/页面宽度而不会破坏.特别是只有一个小滚动条.

无论如何,这是一个可能有用的解决方法:

html {
    overflow-y: scroll;
}

添加此样式将确保滚动条轨道始终存在,并且还有助于在滚动条出现/消失时避免"跳跃"页面.同样,真正的解决方案是使用灵活的布局.

作为旁注,通常不建议使用滚动条样式.它不能跨浏览器工作,通常会被完全忽略.