使滚动条不占空间/防止布局移位
Posted
技术标签:
【中文标题】使滚动条不占空间/防止布局移位【英文标题】：Make scroll bar take no space / prevent layout shift 【发布时间】：2014-02-17 11:59:17 【问题描述】：我正在使用 html 制作应用程序，并且需要有一个滚动条。但是，每当我添加一个时，它都会将所有内容转移到滚动条所需的必要空间。这搞砸了应用程序的布局。
所以我需要一种方法让滚动条简单地覆盖在页面顶部，这意味着页面仍然在它后面。我已经知道如何设置滚动条的样式以使背面透明，我只需要滚动条不占用任何空间。
提前致谢！
【问题讨论】：
您能否提供您当前的代码，perhaps with this?。今天我的通灵能力不太好。此外，如果scrollbar 不占用任何空间...您将如何滚动...？您最好的选择是强制滚动条始终显示。或者，在你的元素上使用填充，这样就不会发生。
如果将代码发布到 JSFiddle，那么它也应该在这里发布，以便问题是独立的。当然，代码无论如何都应该贴在这里，但是只发布到 JSFiddle 之类的就不能令人满意了。
我的意思是滚动条在那里只是网站的内容可能在它后面，好像滚动条不在那里，但你仍然可以看到它
@NicholasHazel，如果内容没有到达页面底部，滚动条将不会出现。
【参考方案1】：
更新 - overlay 仅适用于 webkit，现已弃用。
您可以使用overflow overlay 属性代替scroll：
html
overflow-y: overlay;
【讨论】：
overflow: overlay 已被弃用，不应使用。并且仅在基于 WebKit 的浏览器中受支持。见developer.mozilla.org/en-US/docs/Web/CSS/overflow
不幸的是，虽然它有点工作，但不会在滚动条宽度后面明显呈现内容。这有点奇怪。【参考方案2】：
如果不使用阴暗的 hack，就无法使滚动条出现在您的内容的顶部，而且这也不是最好的主意，因为它会影响您应用的可用性。如果滚动条在内容上方，它可能会隐藏链接/文本/等。
理想情况下，您的页面的样式应使其适应不同的浏览器/页面宽度而不会中断。尤其是只有一个小滚动条。
无论如何，这里有一个可能会有所帮助的解决方法：
html
overflow-y: scroll;
添加此样式将确保滚动条轨道始终存在，并且还有助于避免在滚动条出现/消失时出现“跳跃”页面。同样，真正的解决方案是使用灵活的布局。
作为旁注，通常不建议为滚动条设置样式。它不能跨浏览器工作，通常会被完全忽略。
【讨论】：
^ 是的，他说的。 +1 我不需要担心跨浏览器，因为我使用的是仅使用 webkit 的潮汐dk。我想生病只是想办法解决它。谢谢！ 我什至不会在 webkit 中推荐它，事实上最近有一个更新彻底改变了滚动条。【参考方案3】：您可以通过隐藏滚动条来解决这个问题。解决方案在 ws3Schools 网站，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>
【讨论】：
【参考方案4】：2021 年更新 - 使用 scrollbar-gutter
scrollbar-gutter CSS 属性允许作者为滚动条保留空间，防止在内容增长时发生不必要的布局更改，同时在不需要滚动时避免不必要的视觉效果。
body
overflow-y: auto;
scrollbar-gutter: stable;
示例
堆栈片段和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>进一步阅读
文档 scrollbar-gutter | MDN scrollbar-gutter | CanIUse 文章 Prevent unwanted Layout Shifts caused by Scrollbars with the scrollbar-gutter CSS property Explainer for the "scrollbar-gutter" CSS property. scrollbar-gutter | CSS-Tricks 规格 CSS WG Blog – Minutes Telecon 2021-08-04 CSS Overflow Module Level 3【讨论】：
【参考方案5】：如果您不怕隐藏某些东西，下面的代码似乎可以工作。
body
width: 100vw;
overflow-x: hidden;
@supports (overflow-x: clip)
body
overflow-x: clip;
clip 和hidden 的区别在于clip 关键字还禁止所有 滚动，包括程序化滚动。对于不支持clip的浏览器，如果需要，在document.body的滚动事件回调中将scrollLeft重置为0。
另请参阅，browser compatibility of overflow。
【讨论】：
【参考方案6】：如果你想一直隐藏滚动条，可以使用这个代码。 * 表示全部
/* 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 */
【讨论】：
以上是关于使滚动条不占空间/防止布局移位的主要内容，如果未能解决你的问题，请参考以下文章