<html>
<head>
<title></title>
<style type="text/css">
.test {
width: 500px;
height: 300px;
border:1px solid #ededed;
overflow: scroll;
}
::-webkit-scrollbar/*整体部分*/
{
width: 10px;
height: 0
}
::-webkit-scrollbar-track/*滑动轨道*/
{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0px;
background: #fff;
}
::-webkit-scrollbar-thumb/*滑块*/
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #c3c3c3;
}
::-webkit-scrollbar-thumb:hover/*滑块效果*/
{
/*border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.4);*/
}
</style>
</head>
<body>
<div class="test">
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>
/* Let‘s get this party started */
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px #f6f6f6;
/*-webkit-border-radius: 10px;*/
border-radius: 10px;
}
::-webkit-scrollbar-track-piece {
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #c3c3c3;
/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); */
}
</p>
</div>
</body>
</html>
时间： 2024-12-27 18:10:56