笔记：CSS改变webkit的浏览器滚动条样式

最新推荐文章于 2024-04-09 16:51:23 发布

GarenWang

最新推荐文章于 2024-04-09 16:51:23 发布

阅读量314

点赞数

分类专栏：前端

前端专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一种使用CSS自定义滚动条样式的实现方法。通过WebKit浏览器引擎提供的伪元素选择器，可以对滚动条的整体部分、滑动轨道及滑块进行细致的样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        ::-webkit-scrollbar/*整体部分*/
        {
            width: 10px;
            height:10px;
        }

        ::-webkit-scrollbar-track/*滑动轨道*/
        {
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 0px;
            background: rgba(0,0,0,0.1);
        }

        ::-webkit-scrollbar-thumb/*滑块*/
        {
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.2);
        }

        ::-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 style="height: 3000px;width: 100%"></div>
</body>
</html>