Css 简明教程

CSS - Scrollbars

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

Scrollbars are UI elements that allow users to navigate through long content that doesn’t fit entirely within the visible area.

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

They consist of vertical or horizontal bars with a draggable thumb, enabling users to move the content up and down or left to right.

How to Style Scrollbars?

Create a container element, such as div, to hold the content and the scrollbar.
Set the height of the container element to a fixed value.
Add the overflow: auto property to the container element to enable the scrollbar.
Use the :-webkit-scrollbar pseudo-element to style the scrollbar.
Customize the scrollbars using CSS properties ( width, height, background-color, border, border-radius ).

Scrollbar Selectors

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

For webkit browsers(Chrome, Safari, Edge), you can use following pseudo-elements to make changes to scrollbar.

::-webkit-scrollbar Selects the entire scrollbar to style it.
::-webkit-scrollbar-button Selects the buttons at the top and bottom of scrollbar.
::-webkit-scrollbar-thumb Selects the draggable scrolling thumb.
::-webkit-scrollbar-track Tracks background of the scrollbar.
::-webkit-scrollbar-track-piece Selects the intermediate part of the scrollbar track between the thumb’s top and bottom positions.
::-webkit-scrollbar-corner Selects the bottom corner of scrollbar where horizontal and vertical scrollbar meets.
::-webkit-resizer Selects tha draggable resizer at the bottom of scrollbar.

Create a Custom Scrollbar

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

The following example demonstrates how to create and style a basic scrollbar using the -webkit-scrollbar CSS pseudo-element.

Example

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

This example will only work properly on webkit browsers(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 伪元素设置滚动条的样式，以通过添加颜色、宽度、边框和边框半径来自定义它们的外观 −

The following example demonstrates how to style scrollbars using the -webkit-scrollbar pseudo-element to customize their appearance by adding colors, width, border and border-radius −

Example

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

This example will only work properly on webkit browsers(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>