我正在使用 HTML 制作一个应用程序,需要一个滚动条。但是每当我添加一个滚动条时,它会移动一切以腾出必要的空间。这会破坏应用程序的布局。
因此,我需要一种方法使滚动条简单地覆盖在页面上,这意味着页面仍然在其后面。我已经知道如何设置样式使滚动条的背景透明,我只需要让滚动条不占用任何空间。
提前感谢!
因此,我需要一种方法使滚动条简单地覆盖在页面上,这意味着页面仍然在其后面。我已经知道如何设置样式使滚动条的背景透明,我只需要让滚动条不占用任何空间。
提前感谢!
scrollbar-gutter
scrollbar-gutter
CSS属性允许作者保留滚动条的空间,防止内容增长时出现不必要的布局更改,同时在不需要滚动时避免不必要的视觉影响。
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;
}
<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>
overlay
是 Webkit 浏览器专用的,现在已经被弃用。您可以使用 overflow
的 overlay
属性来替代 scroll
:
html {
overflow-y: overlay;
}
overflow-y: overlay;
属性之前,请三思而后行。我曾在一个项目中使用它,结果导致我的动画出现了偏差,并在移动设备上引起了一些问题。 - first没有办法在不使用不良技巧的情况下使滚动条出现在内容之上,而且这也不是一个好主意,因为它会影响您的应用程序的可用性。如果滚动条覆盖了内容,很可能会隐藏链接/文本等。
理想情况下,您的页面应该以一种适应不同浏览器/页面宽度而不会破裂的方式进行样式设置,特别是只有一点滚动条。
无论如何,这里有一个可能会有所帮助的解决方法:
html {
overflow-y: scroll;
}
添加这个样式将确保滚动条轨道始终存在,并且还将帮助避免出现“跳动”的页面,当滚动条出现/消失时。再次强调,真正的解决方案是使用灵活的布局。
顺便说一句,通常不建议样式化滚动条。它无法在所有浏览器上起作用,通常会被完全忽略。
您可以通过隐藏滚动条来解决这个问题。解决方案在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>
如果你不怕有些隐藏的东西,下面的代码似乎可以工作。
body {
width: 100vw;
overflow-x: hidden;
}
@supports (overflow-x: clip) {
body {
overflow-x: clip;
}
}
clip
和 hidden
的区别在于,clip
关键字还禁止所有滚动,包括程序化滚动。对于不支持 clip
的浏览器,在 document.body
的滚动事件回调中,如有需要,请将 scrollLeft
重置为 0
。
另请参阅, overflow
的浏览器兼容性。
*
表示全部。/* 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 */
}
scrollbar
没有占据任何空间...那你怎么滚动呢?你最好的选择是强制始终显示滚动条。或者,在你的元素上使用填充来避免这种情况发生。 - Nicholas Hazel