介绍之前,先穿插一个小知识点,大神略过;
经常看见 在css属性前加上-webkit之类的代码,也就是兼容不同浏览器的代码;
-webkit 兼容chrome(谷歌)、safari(MacOS端浏览器);
-moz 兼容firefox(火狐);
-ms 兼容ie;
为什么讲这个,因为:修改滚动条样式只有谷歌支持;
所以:以下css属性直接根据需求带走;
::-webkit-scrollbar 滚动条整体,相当于包在最外面的父盒子
::-webkit-scrollbar-thumb 滚动条里面的小方块(可以刺溜刺溜移动的那个)
::-webkit-scrollbar-track 滚动条的轨道(你就理解成父盒子的背景)
::-webkit-scrollbar-button 滚动条的轨道的两端按钮
::-webkit-scrollbar-track-piece 内层轨道(就是track减去thumb剩余部分)
::-webkit-scrollbar-corner 边角,垂直和水平两个滚动条的交汇处
::-webkit-resizer 放在两个滚动条的交汇处,用于拖动调整元素大小的控件
用法:
我放一个滚动条demo,直接拉走就有效果(前提是兼容);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>-webkit-scrollbar</title>
</head>
<style>
/*先写好基础样式,可以忽略,为了更清楚显示效果*/
.panel {
width: 300px;
height: 200px;
margin: 0 auto;
background: #242424;
overflow-y: scroll;
}
.inner {
height: 600px;
}
.inner li {
height: 18%;
margin: 2px 0;
background: #009678;
}
/*从这里开始滚动条走起*/
.panel::-webkit-scrollbar {
width: 10px;
}
/*滑块*/
.panel::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #e0e0e0;
-webkit-box-shadow: 0 0 5px #fff inset;
}
/*轨道*/
.panel::-webkit-scrollbar-track {
background: rgba(255, 255, 255, .3);
}
/*按钮*/
.panel::-webkit-scrollbar-button {
height: 10px;
background: #81bd01;
}
</style>
<body>
<div class="panel">
<div class="inner">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</div>
</div>
</body>
</html>
说白了就是使用的伪元素实现的;
别告诉我这带上空格才几十行的代码看不懂,不信!