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

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

以下图为例,可以分别定义滚动条背景、滚动轨道、滚动滑块的样式。

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

html 复制代码
<!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>

设置简单的、窄的滚动条

css 复制代码
        /* 定义滚动条 */
        ::-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等三个伪元素前面添加自定义类的限制:

html 复制代码
<!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>
相关推荐
前端Hardy21 小时前
告别抽象!可视化动画带你学习算法——选择排序
前端·javascript·css
我的写法有点潮1 天前
简单轻便的四个CSS动画库
前端·css·vue.js
今禾1 天前
深入解析CSS Grid布局:从入门到精通
前端·css·面试
叫我詹躲躲1 天前
20 个「拿来就用」的 CSS 小技巧,帮你快速提升页面质感
css
Soulkey1 天前
Grid布局
前端·css
!win !1 天前
一文搞懂Flex弹性布局空间分配规则
css·flex
zheshiyangyang1 天前
Sass开发【四】
前端·css·sass
Miss Stone2 天前
css练习
前端·javascript·css
xw52 天前
一文搞懂Flex弹性布局空间分配规则
前端·css·flexbox
susu10830189112 天前
css中的vm和vh,页面滚动的卡片网页
前端·css