如何修改滚动条的默认样式

林小饼
239 阅读2分钟

一、瞅瞅滚动条的默认样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            overflow: auto;
            width: 200px;
            height: 100px;
            background-color: #738fd5;
            color: #fff;
        }
        .box > div {
            width: 250px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>泰戈尔说：“你的负担将变成礼物，你受的苦将照亮你的路。”</div>
        <div>泰戈尔说：“你的负担将变成礼物，你受的苦将照亮你的路。”</div>
        <div>泰戈尔说：“你的负担将变成礼物，你受的苦将照亮你的路。”</div>
        <div>泰戈尔说：“你的负担将变成礼物，你受的苦将照亮你的路。”</div>
        <div>泰戈尔说：“你的负担将变成礼物，你受的苦将照亮你的路。”</div>
        <div>泰戈尔说：“你的负担将变成礼物，你受的苦将照亮你的路。”</div>
        <div>泰戈尔说：“你的负担将变成礼物，你受的苦将照亮你的路。”</div>
    </div>
</body>

</html>

不得不说：嗯，中规中矩，很一般。

image.png

二、认识与滚动条相关的私有属性（CSS伪类）

不查不知道，一查吓一跳：

  1. 整个滚动条::-webkit-scrollbar
  2. 滚动条上的滚动滑块::-webkit-scrollbar-thumb
  3. 垂直滚动条和水平滚动交汇的部分::-webkit-scrollbar-corner
  4. 滚动条没有滑块的轨道部分(外层)::-webkit-scrollbar-track
  5. 滚动条没有滑块的轨道部分(内层)::-webkit-scrollbar-track-piece
  6. 滚动条上的按钮(上下箭头)::-webkit-scrollbar-button
  7. 定义右下角拖动块的样式::-webkit-resizer
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            overflow: auto;
            width: 200px;
            height: 100px;
            background-color: #738fd5;
            color: #fff;
        }
        .box > div {
            width: 250px;
        }
         /* 整个滚动条 */
         ::-webkit-scrollbar {
            position: absolute;
            width: 10px !important;
            height: 10px !important;
        }
        /* 滚动条上的滚动滑块 */
        ::-webkit-scrollbar-thumb {
            background: rgba(90,201,222,0.3);
            border-radius: 5px;
            border: 1px solid #258b8b;
        }
        /* 滚动条上的滚动滑块悬浮效果 */
        ::-webkit-scrollbar-thumb:hover {
            background-color: #738fd5;
        }
        /* 当同时有垂直滚动条和水平滚动条时交汇的部分 */
        ::-webkit-scrollbar-corner {
            background-color: red;
        }
        /* 滚动条没有滑块的轨道部分 */
        ::-webkit-scrollbar-track-piece {
            background-color: pink;
        }
        /*滚动条上的按钮(上下箭头)  */
        ::-webkit-scrollbar-button {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>泰戈尔说：“你的负担将变成礼物，你受的苦将照亮你的路。”</div>
        <div>泰戈尔说：“你的负担将变成礼物，你受的苦将照亮你的路。”</div>
        <div>泰戈尔说：“你的负担将变成礼物，你受的苦将照亮你的路。”</div>
        <div>泰戈尔说：“你的负担将变成礼物，你受的苦将照亮你的路。”</div>
        <div>泰戈尔说：“你的负担将变成礼物，你受的苦将照亮你的路。”</div>
        <div>泰戈尔说：“你的负担将变成礼物，你受的苦将照亮你的路。”</div>
        <div>泰戈尔说：“你的负担将变成礼物，你受的苦将照亮你的路。”</div>
    </div>
</body>

</html>

额：有点花里胡哨，草率了

image.png

三、实际如何修改滚动条的样式

实际项目中，我们一般用到 -webkit-scrollbar 和 -webkit-scrollbar-thumb 就够了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            overflow: auto;
            width: 200px;
            height: 100px;
            background-color: #738fd5;
            color: #fff;
        }
         /* 整个滚动条 */
         ::-webkit-scrollbar {
            position: absolute;
            width: 10px !important;
            height: 10px !important;
        }
        /* 滚动条上的滚动滑块 */
        ::-webkit-scrollbar-thumb {
            background: rgba(90,201,222,0.3);
            border-radius: 5px;
            border: 1px solid #258b8b;
        }
        /* 滚动条上的滚动滑块悬浮效果 */
        ::-webkit-scrollbar-thumb:hover {
            background-color: #738fd5;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>泰戈尔说：“你的负担将变成礼物，你受的苦将照亮你的路。”</div>
        <div>泰戈尔说：“你的负担将变成礼物，你受的苦将照亮你的路。”</div>
        <div>泰戈尔说：“你的负担将变成礼物，你受的苦将照亮你的路。”</div>
        <div>泰戈尔说：“你的负担将变成礼物，你受的苦将照亮你的路。”</div>
        <div>泰戈尔说：“你的负担将变成礼物，你受的苦将照亮你的路。”</div>
        <div>泰戈尔说：“你的负担将变成礼物，你受的苦将照亮你的路。”</div>
        <div>泰戈尔说：“你的负担将变成礼物，你受的苦将照亮你的路。”</div>
    </div>
</body>

</html>

嘿，这样是不是好多啦！ image.png

avatar
文章
阅读
粉丝