CSS 滚动条始终可见

在网页中展示长内容时，滚动条是非常必要的。然而，在某些情况下，滚动条可能会自动隐藏起来，影响用户体验。本文将介绍如何让滚动条始终可见。

方法一： 使用 ::-webkit-scrollbar

我们可以使用 ::-webkit-scrollbar 伪元素来自定义滚动条的样式。在此基础上，可以通过设置 display 属性将滚动条始终可见。

/* 可见状态 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

/* 禁用状态 */
::-webkit-scrollbar:disabled {
  width: 0;
}

::-webkit-scrollbar-thumb:disabled {
  background: transparent;
}

在上述代码中，我们设置了滚动条的宽和高以及滚动条的颜色。如果要让滚动条一直可见，只需添加以下代码：

/* 始终可见的滚动条 */
::-webkit-scrollbar {
  display: block;
}

方法二： 使用 overflow-y

另一种方法是使用 overflow-y 属性，该属性控制元素在垂直方向上的滚动条。我们可以将 overflow-y 设置为 scroll，以便滚动条始终可见。

/* 始终可见的滚动条 */
div {
  overflow-y: scroll;
}

在使用 overflow-y 时，我们需要确保对应的元素设置了一个固定的高度或者最大高度，以便当内容超出时能自动出现滚动条。

结论

以上两种方法都可以让滚动条始终可见。在其中使用何种方法，应根据实际情况和需求进行选择。

Markdown 代码片段

## 方法一： 使用 ::-webkit-scrollbar

我们可以使用 `::-webkit-scrollbar` 伪元素来自定义滚动条的样式。在此基础上，可以通过设置 `display` 属性将滚动条始终可见。

```css
/* 可见状态 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

/* 禁用状态 */
::-webkit-scrollbar:disabled {
  width: 0;
}

::-webkit-scrollbar-thumb:disabled {
  background: transparent;
}

在上述代码中，我们设置了滚动条的宽和高以及滚动条的颜色。如果要让滚动条一直可见，只需添加以下代码：

/* 始终可见的滚动条 */
::-webkit-scrollbar {
  display: block;
}

方法二： 使用 overflow-y

另一种方法是使用 overflow-y 属性，该属性控制元素在垂直方向上的滚动条。我们可以将 overflow-y 设置为 scroll，以便滚动条始终可见。

/* 始终可见的滚动条 */
div {
  overflow-y: scroll;
}

在使用 overflow-y 时，我们需要确保对应的元素设置了一个固定的高度或者最大高度，以便当内容超出时能自动出现滚动条。

结论

以上两种方法都可以让滚动条始终可见。在其中使用何种方法，应根据实际情况和需求进行选择。