css视觉--自定义滚动条
2018-03-23 本文已影响0人
怪兽别跑biubiubi
<!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>
