css视觉--自定义滚动条

<!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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容