如果没有溢出, 则隐藏 CSS 中的滚动条 - CSS

概述

在 Web 开发中，我们经常会遇到某些元素内容超出容器尺寸而产生滚动条的情况。然而，有时我们希望在内容没有溢出的情况下隐藏滚动条，以提供更清爽的用户界面。

本文介绍了如何使用 CSS 来隐藏滚动条，并提供了两种常见的方法。

方法一：隐藏整个滚动条

要隐藏整个滚动条，我们可以使用 overflow: hidden; 属性来消除滚动条及其相应的滚动行为。

.container {
  overflow: hidden;
}

上述代码将应用于具有 .container 类的元素，效果是当内容超出 .container 的尺寸时，不会显示滚动条。

请注意，这种方法会立即隐藏整个滚动条，无论内容是否溢出。这意味着即使内容没有溢出，滚动行为也将被禁用。

方法二：隐藏滚动条但保留滚动行为

如果你希望保留滚动行为（例如，利用滚动鼠标滚轮或触摸板来浏览内容），同时只是隐藏滚动条，可以使用 -webkit-scrollbar 相关属性来实现。

.container::-webkit-scrollbar {
  width: 0.8rem;  /* 定义滚动条宽度 */
  background-color: #F5F5F5;  /* 定义滚动条背景颜色 */
}

.container::-webkit-scrollbar-thumb {
  background-color: #888;  /* 定义滚动条前景颜色 */
}

上述代码将应用于具有 .container 类的元素。通过设置 .container::-webkit-scrollbar 的宽度来定义滚动条的宽度，通过设置 .container::-webkit-scrollbar-thumb 的背景颜色来定义滚动条的前景颜色。

这种方法只会在内容溢出时显示滚动条，而内容没有溢出时则会隐藏。此外，滚动行为也能正常使用。

结论

本文介绍了如何隐藏 CSS 中的滚动条，无论内容是否发生溢出。你可以根据需要选择适合的方法来提供清爽的用户界面。