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

46
我正在使用 HTML 制作一个应用程序,需要一个滚动条。但是每当我添加一个滚动条时,它会移动一切以腾出必要的空间。这会破坏应用程序的布局。
因此,我需要一种方法使滚动条简单地覆盖在页面上,这意味着页面仍然在其后面。我已经知道如何设置样式使滚动条的背景透明,我只需要让滚动条不占用任何空间。
提前感谢!

2
你能提供你目前的代码吗,或许可以用这个? 我今天的心灵感应不太灵。此外,如果scrollbar没有占据任何空间...那你怎么滚动呢?你最好的选择是强制始终显示滚动条。或者,在你的元素上使用填充来避免这种情况发生。 - Nicholas Hazel
如果在JSFiddle上发布代码,则应该同时在此处发布,以便问题是自包含的。当然,无论如何都应该在此处发布代码,但仅在JSFiddle或类似网站上发布是不够满意的。 - ajp15243
我的意思是滚动条在那里,只是网站的内容可能会被它遮挡住,就好像没有滚动条一样,但你仍然可以看到它。 - Porter Morgan
1
@NicholasHazel,如果内容没有达到页面的底部,滚动条将不会出现。 - yaakov
6个回答

46

2021更新 - 使用 scrollbar-gutter

scrollbar-gutter CSS属性允许作者保留滚动条的空间,防止内容增长时出现不必要的布局更改,同时在不需要滚动时避免不必要的视觉影响。

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

示例

滚动条间隙示例

在 Stack Snippets 和jsFiddle 中演示

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;
}
<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>

更多阅读


8
问题询问如何使其不占用空间,这会使其始终占用空间。 - Glass Cannon
@GlassCannon,这个问题也问到了如何“防止布局变化”,这个解决方案可以解决这个问题,但是我添加了一些替代方案的链接,以占用零空间(尽管这可能会给依赖滚动条可用性的用户带来挑战)。 - KyleMit
1
2023 年,这是现在的首选解决方案。 - first

22

更新 - overlay 是 Webkit 浏览器专用的,现在已经被弃用。


您可以使用 overflowoverlay 属性来替代 scroll

html {
    overflow-y: overlay;
}

7
"overflow: overlay"已被弃用,不应再使用,并且仅在基于WebKit的浏览器中受支持。请参见https://developer.mozilla.org/en-US/docs/Web/CSS/overflow。 - Thyme
1
不幸的是,尽管它有点工作,但它仍然无法在滚动条宽度后可见地呈现内容。这有点奇怪。 - wintercounter
1
我看不出这个已经被弃用了。它在2022年仍然可用,并且似乎是Webkit浏览器的有效渐进式解决方案。 - suncat100
在使用overflow-y: overlay;属性之前,请三思而后行。我曾在一个项目中使用它,结果导致我的动画出现了偏差,并在移动设备上引起了一些问题。 - first

18

没有办法在不使用不良技巧的情况下使滚动条出现在内容之上,而且这也不是一个好主意,因为它会影响您的应用程序的可用性。如果滚动条覆盖了内容,很可能会隐藏链接/文本等。

理想情况下,您的页面应该以一种适应不同浏览器/页面宽度而不会破裂的方式进行样式设置,特别是只有一点滚动条。

无论如何,这里有一个可能会有所帮助的解决方法:

html {
    overflow-y: scroll;
}

添加这个样式将确保滚动条轨道始终存在,并且还将帮助避免出现“跳动”的页面,当滚动条出现/消失时。再次强调,真正的解决方案是使用灵活的布局。

顺便说一句,通常不建议样式化滚动条。它无法在所有浏览器上起作用,通常会被完全忽略。


^ 是的,他说的对。+1 - Nicholas Hazel
1
我不需要担心跨浏览器问题,因为我使用的是只使用 WebKit 的 TideSDK。我想我只需要想办法解决它。谢谢! - Porter Morgan
我甚至不建议在Webkit中使用它,事实上最近有一个更新大大改变了滚动条。 - Wesley Murch
太好了!我测试了一下,它按预期工作。 - s00103898-276165-15433
请参考KyleMit的答案,它非常有效。 - Manoj TM
在我看来,这是一个可怕的答案,特别是因为移动浏览器中的滚动条默认情况下会覆盖在内容上,但是使用相同的方式在桌面上却是一个可怕的想法。感谢 Mozilla 不让我们“破坏”我们的应用程序。 - Glass Cannon

4

您可以通过隐藏滚动条来解决这个问题。解决方案在W3Schools网站上,https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

<!DOCTYPE html>
<html>
<head>
<style>
.example {
  background-color: #eee;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow-y: scroll; /* Add the ability to scroll */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
</style>
</head>
<body>

<h2>Hide scrollbar but keep functionality</h2>
<p>Try to scroll inside the div below:</p>

<div class="example">Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. </div>

</body>
</html>

0

如果你不怕有些隐藏的东西,下面的代码似乎可以工作。

body {
  width: 100vw;
  overflow-x: hidden;
}

@supports (overflow-x: clip) {
  body {
    overflow-x: clip;
  }
}

cliphidden 的区别在于,clip 关键字还禁止所有滚动,包括程序化滚动。对于不支持 clip 的浏览器,在 document.body 的滚动事件回调中,如有需要,请将 scrollLeft 重置为 0

另请参阅, overflow 的浏览器兼容性


-1
如果想要始终隐藏滚动条,可以使用以下代码。其中 * 表示全部。
/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
*{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接