关于滚动条的设计,需要用到css3的伪元素,都列在下边吧(以Chrome内核webkit为例)。
-webkit-scrollbar 滚动条的整体轮廓,width表示纵向滚动条的宽度,height表示横向滚动条的高度。
-webkit-scrollbar-track 滚动轨迹
-webkit-scrollbar-thumb 滚动滑块
-webkit-scrollbar-corner 滚动条右下角的小正方形
做个例子参考一下:
<!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>
.box{
width: 800px;
height: 500px;
overflow: auto;
margin: 20px auto;
background-color: #ccc;
border: 1px solid #ccc;
border-radius: 10px;
padding: 5px;
}
.box::-webkit-scrollbar{
width: 6px;
height: