仅垂直 CSS 滚动条

在很多情况下，网站或应用程序需要垂直滚动条以使用户能够在页面上垂直滚动。然而，有时候水平滚动条会变得多余，甚至会影响到用户体验。在这篇文章中，我们将讨论如何创建仅垂直的 CSS 滚动条，以提供更好的用户体验。

HTML 结构

为了创建一个仅垂直的 CSS 滚动条，我们需要使用一些基本的 HTML 和 CSS。首先，我们将使用一个 div 元素来包含所有需要滚动的内容。这个 div 元素需要拥有一个具有固定高度的容器来限制其高度，并且需要设置 overflow-y 属性为 scroll，这样将会在需要时自动显示垂直滚动条。

<div class="scroll-container">
  <div class="scroll-content">
    <!-- Your scrollable content goes here -->
  </div>
</div>

CSS 样式

现在，我们需要使用 CSS 来美化我们的滚动条。我们将使用伪元素 ::-webkit-scrollbar 来选择滚动条，并使用伪元素 ::-webkit-scrollbar-thumb 和 ::-webkit-scrollbar-track 来选择滚动条的滑块（拇指）和滑动轨道。

/* Scrollbar */
.scroll-container::-webkit-scrollbar {
  width: 6px;
  height: 100%;
}
.scroll-container::-webkit-scrollbar-thumb {
  background-color: #c4c4c4;
  border-radius: 16px;
}
.scroll-container::-webkit-scrollbar-track {
  background-color: #f2f2f2;
  border-radius: 16px;
}

在这段代码中，我们为滚动条设置了一个宽度和高度，并为滑块和滑动轨道设置了背景颜色和边缘半径。您可以根据需要更改这些样式。

兼容性

请注意，伪元素 ::-webkit-scrollbar 只适用于 WebKit 引擎和 Chromium 浏览器。对于其他浏览器，您可能需要使用 JavaScript 来创建自定义滚动条。

结论

通过使用上述代码，我们可以轻松创建一个仅垂直的 CSS 滚动条，以提供更好的用户体验。您可以根据需要自定义样式，以使其更加适合您的网站或应用程序。