使滚动条不占用空间/防止布局移动

Question

我正在用html制作一个应用程序，并且需要有一个滚动条。但是，每当我添加一个时，它都会移动所有内容，以便为滚动条提供必要的空间。这搞砸了应用程序的布局。

因此，我需要一种方法，使滚动条简单地覆盖在页面顶部，这意味着页面仍然在它后面。我已经知道如何设计滚动条以使背面透明，我只需要滚动条不占用任何空间。

提前感谢！

Answer 1

scrollbar gutterCSS属性允许作者为滚动条保留空间，防止内容增长时出现不必要的布局更改，同时避免在不需要滚动时出现不需要的视觉效果。

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

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

html lang-html prettyprint-override"><h1><code>scrollbar-gutter</code> sample</h1>

<div class="grid">

  <div class="card">
    <pre class="card-header">
overflow: auto;
scrollbar-gutter: auto;
    </pre>
    <div class="card-body">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol</div>
  </div>
  
  <div class="card">
    <pre class="card-header">
overflow: auto;
scrollbar-gutter: stable;
    </pre>
    <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>
  </div>
  
  <div class="card">
    <pre class="card-header">
overflow: auto;
scrollbar-gutter: auto;
    </pre>
    <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>
  </div>
  
  <div class="card">
    <pre class="card-header">
overflow: auto;
scrollbar-gutter: stable;
    </pre>
    <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>
  </div>
  
</div>

Answer 2

如果不使用阴暗的黑客手段，就无法让滚动条出现在你的内容顶部，而且这也不是最好的主意，因为它会影响你的应用程序的可用性。如果滚动条在内容上方，它可能会隐藏链接/文本等。

理想情况下，您的页面应以适合不同浏览器/页面宽度的方式进行样式设置，而不会中断。特别是只有一个小滚动条。

无论如何，这里有一个解决方法可能会有所帮助：

html {
    overflow-y: scroll;
}

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

顺便说一下，通常不建议设计滚动条的样式。它不能跨浏览器工作，通常会被完全忽略。

Answer 3

您可以使用溢出覆盖属性而不是滚动：

css prettyprint-override">html {
    overflow-y: overlay;
}