web-kit 修改滚动条样式

最新推荐文章于 2024-07-29 09:26:52 发布

小虾Suki

最新推荐文章于 2024-07-29 09:26:52 发布

阅读量411

点赞数

分类专栏： CSS3 前端开发

本文链接：https://blog.csdn.net/qq_39108466/article/details/79413933

版权

前端开发同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

CSS3

6 篇文章 0 订阅

订阅专栏

这篇博客记录了如何在Webkit浏览器中修改滚动条的样式，内容引用了TypeScript官方文档，并提供了一段实现样式的代码。同时，还推荐了一篇相关文章供读者参考。

摘要由CSDN通过智能技术生成

在TypeScript官方文档里注意到的样式，算做个小笔记。
只在web-kit 浏览器中有效：

效果：
这里写图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/pop.css">
    <style>
        .cont{
            background: lightgoldenrodyellow;
            height: 2000px;
            width: 100%;
        }

        /* 核心代码 */
        ::-webkit-scrollbar {/* 滚动条样式 - 宽高 */
            width: 5px;
            /*height: 5px;
            background-color: #F5F5F5;*/ /* 这两个貌似没有起作用，省去 */
        }

        ::-webkit-scrollbar-thumb { /* 滚动条样式 */
            -webkit-box-shadow: inset 0 0 2.5px rgba(0, 0, 0, .3);
            box-shadow: inset 0 0 2.5px rgba(0, 0, 0, .3);
            border-radius: 2.5px;
            background-color: #294E80;
            opacity: .7;
            transition: opacity ease-in-out 200ms;
        }

        ::-webkit-scrollbar-track { /* 滚动条轨道样式 */
            -webkit-box-shadow: inset 0 0 2.5px rgba(0, 0, 0, 0.3);
            box-shadow: inset 0 0 2.5px rgba(0, 0, 0, 0.3);
            border-radius: 2.5px;
            background-color: #F5F5F5;
        }

        ::-webkit-scrollbar-thumb:hover {
            opacity: 1;
        }

    </style>
</head>
<body>
<div class="cont">
    这里是容器内容
</div>

</body>
</html>