代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
width: 300px;
height: 100px;
overflow: auto;
}
p {
width: 500px;
height: 200px;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
/*background-color: #ddd;*/
}
/*滑块*/
::-webkit-scrollbar-thumb {
background-color: #333;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #777;
}
/*滑道*/
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px #333;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="container">
<p>Pellentesque habitant morbi tristique senectus...(很多文字)</p>
</div>
</body>
</html>
效果: