css 改写原生滚动条样式
这次记录下自己手写滚动条的样式,我这个呢是横向的,如果各位同学需要纵向的,稍稍改动就好,废话不多说了,直接上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.left_tree {
line-height: 50px;
overflow-y: scroll;
white-space:nowrap;
}
span{
margin-right: 50px;
}
/*定义滚动条高宽及背景*/
::-webkit-scrollbar {
width: 100%;
height: 5px;
}
/*定义滚动条*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #F99D35;
}
/* 定义滚动条轨道 */
.left_tree::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #ededed;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="left_tree">
<span>滚动条滚动条动条</span>
<span>滚动条滚动条动条</span>
<span>滚动条滚动条动条</span>
<span>滚动条滚动条动条</span>
<span>滚动条滚动条动条</span>
<span>滚动条滚动条动条</span>
<span>滚动条滚动条动条</span>
<span>滚动条滚动条动条</span>
<span>滚动条滚动条动条</span>
<span>滚动条滚动条动条</span>
<span>滚动条滚动条动条</span>
<span>滚动条滚动条动条</span>
<span>滚动条滚动条动条</span>
<span>滚动条滚动条动条</span>
<span>滚动条滚动条动条</span>
<span>滚动条滚动条动条</span>
<span>滚动条滚动条动条</span>
<span>滚动条滚动条动条</span>
<span>滚动条滚动条动条</span>
</div>
</body>
</html>
最后上个效果图
完美结束!