标签(空格分隔): css
浏览器自带滚动条总是不能够完全适应项目的样式,修改滚动条样式
<style type="text/css">
.list-auto::-webkit-scrollbar {
/*高宽分别对应横竖滚动条的尺寸*/
width: 6px;
height: 10px;
}
.list-auto {
height: 266px;
overflow-y: auto;
overflow-x: hidden;
}
.list-auto::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: pink;
}
.list-auto::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0;
background: #3F4147;
}
.list-auto::-webkit-scrollbar-thumb:hover{
background: skyblue;
}
div{
width: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="list-auto">
The most distant way in the world
The most distant way in the world
is not the way from birth to the end.
it is when i sit near you
that you don't understand i love u.
The most distant way in the world
is not that you're not sure i love u.
It is when my love is bewildering the soul
but i can't speak it out.
The most distant way in the world
is not that i can't say i love u.
it is after looking into my heart
i can't change my love.
</div>
</body>
</html>
gun.png
网友评论