查看::-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>
】探秘Scrapy：項目結構與配置全解析)
