Css 简明教程

CSS - Scrollbars

滚动条是允许用户浏览不能完全显示在可见区域的较长内容的 UI 元素。

它们由带有可拖动滑块的垂直或水平条组成，使用户能够向上、向下或向左、向右移动内容。

How to Style Scrollbars?

创建一个容器元素，如 div，来容纳内容和滚动条。
将容器元素的高度设定为一个固定值。
向容器元素添加 overflow: auto 属性来启用滚动条。
使用 * :-webkit-scrollbar* 伪元素来设置滚动条的样式。
使用 CSS 属性（宽度、高度、背景颜色、边框、边框圆角）自定义滚动条。

Scrollbar Selectors

对于 webkit 浏览器（Chrome、Safari、Edge），可以使用以下 pseudo-elements 来更改滚动条。

::-webkit-scrollbar 选择整个滚动条来设定样式。
::-webkit-scrollbar-button 选择滚动条顶端和底部的按钮。
::-webkit-scrollbar-thumb 选择可拖动的滚动滑块。
::-webkit-scrollbar-track 跟踪滚动条的背景。
::-webkit-scrollbar-track-piece 选择滑动滑块的顶部和底部位置之间的滚动条轨迹的中部部分。
::-webkit-scrollbar-corner 选择滚动条的底角，垂直和水平滚动条在此处交汇。
::-webkit-resizer 选择滚动条底部的可拖动调整器。

Create a Custom Scrollbar

下面的示例演示如何使用 -webkit-scrollbar CSS 伪元素来创建和设置基本的滚动条。

Example

此示例仅在 webkit 浏览器（Chrome、Safari、Edge）上运行正常。

<html>
<head>
<style>
   div {
      width: 100%;
      height: 120px;
      background-color: #F1EFB0;
      overflow: auto;
   }
   div::-webkit-scrollbar {
      width: 35px;
   }
   div::-webkit-scrollbar-track {
      background: yellow;
   }
   div::-webkit-scrollbar-thumb {
      background: green;
      border-radius: 10px;
   }
   div::-webkit-scrollbar-thumb:hover {
      background: darkgreen;
   }
</style>
</head>

<body>
   <div>
      <h3>
         Scrollbars using -webkit-scrollbar
      </h3>
      This block includes a large amount of content
      to demonstrate how scrollbars work when there
      is an overflow within an element box.
      They consist of vertical or horizontal bars
      with a draggable thumb, enabling users to
      move content up and down or left to right.
      <br>
      <strong>Changes Made:</strong>
      <br>
      Changed Scrollbar Thumb Color
      <br>
      Changed Scrollbar background Color
      <br>
      Add Hover effect to thumb
   </div>
</body>
</html>

Styling a CSS Scrollbar

以下示例演示如何使用 -webkit-scrollbar 伪元素设置滚动条的样式，以通过添加颜色、宽度、边框和边框半径来自定义它们的外观 −

Example

此示例仅在 webkit 浏览器（Chrome、Safari、Edge）上运行正常。

<html>
<head>
<style>
   div {
      width: 370px;
      height: 120px;
      background-color: #F1EFB0;
      overflow: auto;
   }
   div::-webkit-scrollbar {
      width: 15px;
   }
   div::-webkit-scrollbar-track {
      background: #90e9e4;
   }
   div::-webkit-scrollbar-thumb {
      background: #e77f7f;
      border-radius: 10px;
      border: 3px solid yellow;
   }
   div::-webkit-scrollbar-thumb:hover {
      background: #da3e3e;
   }
   .heading{
      color: #DC4299;
      text-align: center;
   }
</style>
</head>
<body>
   <div>
      <h3 class="heading">
         Scrollbars using -webkit-scrollbar
      </h3>
      This block includes a large amount of content
      to demonstrate how scrollbars work when there
      is an overflow within an element box.
      They consist of vertical or horizontal bars
      with a draggable thumb, enabling users to
      move content up and down or left to right.
   </div>
</body>
</html>