Question

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

提前致谢！

Answer 1

没有办法让滚动条在您的内容的上显示而不使用黑幕黑客，并且它不是最好的主意，因为它会影响您应用的可用性。如果滚动条位于内容之上，则可能隐藏链接/文本/等。

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

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

html { overflow-y: scroll; }

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

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

Answer 2

您可以通过隐藏滚动条来解决此问题。解决方案在 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>

Answer 3

只需使用覆盖属性而不是 scroll ，如下所示：

html {
    overflow-y: overlay;
}

请注意，这是仅适用于Webkit的属性。

Answer 4

如果你想一直隐藏滚动条，可以使用这个代码。 * 表示全部

/* 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 */
}

Answer 5

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

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

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

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

另见，browser compatibility of overflow。

滚动条不占空间

5 个答案: