CSS通过webkit-scrollbar设置滚动条样式

eggcode

已于 2025-02-23 14:14:07 修改

阅读量723

点赞数 5

分类专栏： CSS 文章标签： css webkit scrollbar

于 2025-02-23 13:45:10 首次发布

本文链接：https://blog.csdn.net/liqian_ken/article/details/145808658

版权

CSS 专栏收录该内容

5 篇文章

订阅专栏

查看::-webkit-scrollbar-*各项关系

以下图为例，可以分别定义滚动条背景、滚动轨道、滚动滑块的样式。
在这里插入图片描述

需要先给外部容器设置高度，再设置overflow: auto，最后设置三个webkit属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            margin: 50px;
            width: 200px;
            height: 300px;
            border: 1px solid #000;
            background-color: #ddd;
            overflow: auto;/* 显示滚动条*/ 
        }

        /* 定义滚动条 */
        ::-webkit-scrollbar{
            width: 50px;
            background: rgb(43, 239, 25);
        }

        /* 定义滚动轨道 */
        ::-webkit-scrollbar-track{
            background: rgb(250, 81, 81);
            border-radius: 10px;
        }

        /* 定义滚动滑块 */
        ::-webkit-scrollbar-thumb{
            background: orange;
            border-radius: 20px;
        }

    </style>
</head>
<body>
    <div class="container">
        <p>南京师范大学地理科学学院溯源于1902年三江师范学堂历史舆地科，1919年后历经南京高等师范学校国文史地部、国立东南大学地学系、国立中央大学地理系、南京大学地理系等阶段。1952年全国院系调整之际，时任南京大学地理系主任的李旭旦教授偕金祖孟、陆漱芬等先生至南京师范学院创办地理系。1997年江苏省教育委员会批准组建了当时国内第一家地理科学学院。2017年入选国家“双一流”建设学科，2018年地球科学学科进入ESI前1%。2022年再次入选国家“双一流”建设学科。学院始终高举地理学大旗，以国家一流学科和国家重点学科建设为主导、以高水平队伍建设和创新创业人才培养为根本，以科研条件与平台建设为基础，以产学研相结合为动力，脚踏实地建设一流的学科、一流的平台和一流的学院。</p>
        <p>学院拥有地理学国家一流建设学科，地图学与地理信息系统国家级重点学科和人文地理学国家重点（培育）学科，地理信息系统江苏省重中之重学科，自然地理学和人文地理学江苏省重点学科，地理学江苏省一级重点学科和江苏省高校优势学科。拥有虚拟地理环境教育部重点实验室、警用地理信息技术公安部重点实验室、国家地球系统科学数据中心长江三角洲分中心、江苏省地理环境演化国家重点实验室培育建设点、江苏省地理信息资源开发与利用协同创新中心、环境演变与生态建设江苏省重点实验室、地理信息科学江苏省重点实验室、物质循环与污染控制江苏省重点实验室、地理空间信息技术江苏省工程中心、江苏省区域发展与规划研究中心等省部级科研机构，为开展科学研究提供了高水平的优质平台。</p>
    </div>
</body>
</html>

设置简单的、窄的滚动条

        /* 定义滚动条 */
        ::-webkit-scrollbar{
            width: 10px;
            border-radius: 10px;
            background: rgb(198, 198, 198);
        }

        /* 定义滚动轨道 */
        ::-webkit-scrollbar-track{
            background: rgb(198, 198, 198);
            border-radius: 10px;
        }

        /* 定义滚动滑块 */
        ::-webkit-scrollbar-thumb{
            background: rgb(103, 103, 103);
            border-radius: 10px;
        }

在这里插入图片描述

只对某个滚动条设置样式

在这里插入图片描述

在::-webkit-scrollbar等三个伪元素前面添加自定义类的限制：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            margin: 50px;
            padding: 10px;
            width: 200px;
            height: 300px;
            border: 1px solid #000;
            background-color: #ddd;
            overflow: auto;/* 显示滚动条*/ 
            float: left;
        }

        /* 定义滚动条 */
        .scroll::-webkit-scrollbar{
            width: 10px;
            border-radius: 10px;
            background: rgb(198, 198, 198);
        }

        /* 定义滚动轨道 */
        .scroll::-webkit-scrollbar-track{
            background: rgb(198, 198, 198);
            border-radius: 10px;
        }

        /* 定义滚动滑块 */
        .scroll::-webkit-scrollbar-thumb{
            background: rgb(103, 103, 103);
            border-radius: 10px;
        }

    </style>
</head>
<body>
    <div class="container scroll">
        <p>南京师范大学地理科学学院溯源于1902年三江师范学堂历史舆地科，1919年后历经南京高等师范学校国文史地部、国立东南大学地学系、国立中央大学地理系、南京大学地理系等阶段。1952年全国院系调整之际，时任南京大学地理系主任的李旭旦教授偕金祖孟、陆漱芬等先生至南京师范学院创办地理系。1997年江苏省教育委员会批准组建了当时国内第一家地理科学学院。2017年入选国家“双一流”建设学科，2018年地球科学学科进入ESI前1%。2022年再次入选国家“双一流”建设学科。学院始终高举地理学大旗，以国家一流学科和国家重点学科建设为主导、以高水平队伍建设和创新创业人才培养为根本，以科研条件与平台建设为基础，以产学研相结合为动力，脚踏实地建设一流的学科、一流的平台和一流的学院。</p>
        <p>学院拥有地理学国家一流建设学科，地图学与地理信息系统国家级重点学科和人文地理学国家重点（培育）学科，地理信息系统江苏省重中之重学科，自然地理学和人文地理学江苏省重点学科，地理学江苏省一级重点学科和江苏省高校优势学科。拥有虚拟地理环境教育部重点实验室、警用地理信息技术公安部重点实验室、国家地球系统科学数据中心长江三角洲分中心、江苏省地理环境演化国家重点实验室培育建设点、江苏省地理信息资源开发与利用协同创新中心、环境演变与生态建设江苏省重点实验室、地理信息科学江苏省重点实验室、物质循环与污染控制江苏省重点实验室、地理空间信息技术江苏省工程中心、江苏省区域发展与规划研究中心等省部级科研机构，为开展科学研究提供了高水平的优质平台。</p>
    </div>

    <div class="container">
        <p>南京师范大学地理科学学院溯源于1902年三江师范学堂历史舆地科，1919年后历经南京高等师范学校国文史地部、国立东南大学地学系、国立中央大学地理系、南京大学地理系等阶段。1952年全国院系调整之际，时任南京大学地理系主任的李旭旦教授偕金祖孟、陆漱芬等先生至南京师范学院创办地理系。1997年江苏省教育委员会批准组建了当时国内第一家地理科学学院。2017年入选国家“双一流”建设学科，2018年地球科学学科进入ESI前1%。2022年再次入选国家“双一流”建设学科。学院始终高举地理学大旗，以国家一流学科和国家重点学科建设为主导、以高水平队伍建设和创新创业人才培养为根本，以科研条件与平台建设为基础，以产学研相结合为动力，脚踏实地建设一流的学科、一流的平台和一流的学院。</p>
        <p>学院拥有地理学国家一流建设学科，地图学与地理信息系统国家级重点学科和人文地理学国家重点（培育）学科，地理信息系统江苏省重中之重学科，自然地理学和人文地理学江苏省重点学科，地理学江苏省一级重点学科和江苏省高校优势学科。拥有虚拟地理环境教育部重点实验室、警用地理信息技术公安部重点实验室、国家地球系统科学数据中心长江三角洲分中心、江苏省地理环境演化国家重点实验室培育建设点、江苏省地理信息资源开发与利用协同创新中心、环境演变与生态建设江苏省重点实验室、地理信息科学江苏省重点实验室、物质循环与污染控制江苏省重点实验室、地理空间信息技术江苏省工程中心、江苏省区域发展与规划研究中心等省部级科研机构，为开展科学研究提供了高水平的优质平台。</p>
    </div>
</body>
</html>