<!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>自定义滚动条</title>
<style>
.custom-scrollbar {
height: 60px;
overflow: auto;
}
.custom-scrollbar::-webkit-scrollbar {
width: 10px;
}
.custom-scrollbar::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px #333;
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px #333;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="custom-scrollbar">
<p>
Lorem ipsum dolor sit amet
consectetur adipisicing elit. Iure id
exercitationem nulla qui repellat laborum vitae,
molestias tempora velit natus. Quas, assumenda nisi.
Quisquam enim qui iure,
consequatur velit sit?Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus.
Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?
Lorem ipsum dolor sit amet
consectetur adipisicing elit. Iure id
exercitationem nulla qui repellat laborum vitae,
molestias tempora velit natus. Quas, assumenda nisi.
Quisquam enim qui iure,
::-webkit-scrollbar 定位整个滚动条元素。
::-webkit-scrollbar-track 仅针对滚动条轨道。
::-webkit-scrollbar-thumb 瞄准滚动条拇指。
</p>
</div>
</body>
</html>
网友评论