CSS通过webkit-scrollbar设置滚动条样式
查看::-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>