CSS scrollbar滚动条属性-之路教程

CSS scrollbar 属性值说明

值	描述
::-webkit-scrollbar-button	滚动条上的按钮。
::-webkit-scrollbar-track	可拖动滚动句柄。
::-webkit-scrollbar-track-piece	滚动条的轨道。
::-webkit-scrollbar-thumb	轨道的一部分未被句柄覆盖。
::-webkit-scrollbar-corner	滚动条的底角，其中水平和垂直滚动列相遇。
::-webkit-resizer	可拖动调整调整句柄，显示在某些元素的底角。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

语法

scrollbar: ::-webkit-scrollbar-button | ::-webkit-scrollbar-track | ::-webkit-scrollbar-track-piece | ::-webkit-scrollbar-thumb | ::-webkit-scrollbar-corner | ::-webkit-resizer

滚动条属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      html {
        height: 100%;
        overflow: hidden;
      }
      body {
        height: 100%;
        background: #eee;
        overflow: scroll;
        width: 85%;
        max-width: 600px;
        margin: 0 auto;
        padding: 3em;
        font: 100%/1.4 lora, serif;
        border: 1px solid #666;
      }
      p {
        margin: 0 0 1.5em;
      }
      body::-webkit-scrollbar {
        width: 1em;
      }
      body::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      }
      body::-webkit-scrollbar-thumb {
        background-color: #666;
        outline: 1px solid #eee;
      }
    </style>
  </head>
  <body>
    <h2>Scrollbar 属性示例</h2>
    <div>
      经历过风雨，才懂得阳光的温暖。是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </div>
    <div>
      经历过风雨，才懂得阳光的温暖。 是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </div>
    <div>
      经历过风雨，才懂得阳光的温暖。 是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </div>
    <div>
      经历过风雨，才懂得阳光的温暖。 是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </div>
    <div>
      经历过风雨，才懂得阳光的温暖。 是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </div>
    <div>
      经历过风雨，才懂得阳光的温暖。 是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </div>
    <div>
      经历过风雨，才懂得阳光的温暖。 是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </div>
    <div>
      经历过风雨，才懂得阳光的温暖。是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </div>
    <div>
      经历过风雨，才懂得阳光的温暖。 是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </div>
    <div>
      经历过风雨，才懂得阳光的温暖。 是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </div>
  </body>
</html>

带有 ::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb 伪元素的滚动条属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      html {
        height: 100%;
        overflow: hidden;
      }
      body {
        height: 100%;
        background: #ececec;
        overflow: scroll;
        width: 90%;
        max-width: 550px;
        margin: 0 auto;
        padding: 2em;
        border: 2px solid #cccccc;
      }
      p {
        margin: 0 0 1.5em;
      }
      body::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
      }
      body::-webkit-scrollbar {
        width: 5px;
        background-color: #F5F5F5;
      }
      body::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Scrollbar 属性示例</h2>
    <div>
      经历过风雨，才懂得阳光的温暖。 是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </div>
    <div>
      经历过风雨，才懂得阳光的温暖。 是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </div>
    <div>
      经历过风雨，才懂得阳光的温暖。 是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </div>
    <div>
      经历过风雨，才懂得阳光的温暖。 是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </div>
    <div>
      经历过风雨，才懂得阳光的温暖。是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </div>
    <div>
      经历过风雨，才懂得阳光的温暖。 是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </div>
    <div>
      经历过风雨，才懂得阳光的温暖。 是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
    </div>
    <div>
      经历过风雨，才懂得阳光的温暖。 是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
    </div>
	<div>
      经历过风雨，才懂得阳光的温暖。 是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
    </div>
	<div>
      经历过风雨，才懂得阳光的温暖。 是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
    </div>
	<div>
      经历过风雨，才懂得阳光的温暖。 是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
    </div>
  </body>
</html>

CSS scrollbar滚动条属性

CSS scrollbar 属性集是一个专有样式挂钩，让设计人员可以为浏览器的本机滚动条创建自定义主题。

现在，它暴露在-webkit供应商前缀后面。

-webkit-scrollbar 属性集由七个不同的伪元素组成，它们一起构成了一个完整的滚动条 UI 元素。
这七个伪元素如下：

::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer

初始值	auto
应用于	滚动框。
继承	可继承
可动画的	离散的。
版本	-
DOM 语法	-

日期：2020-06-02 22:14:46 来源：oir作者：oir

←CSS scroll-behavior属性

CSS ::selection 伪元素→

CSS scrollbar 属性值说明

语法

滚动条属性示例：

带有 ::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb 伪元素的滚动条属性示例：

目录