使用css修改滚动条样式

最新推荐文章于 2024-03-27 15:28:25 发布

愚舜

最新推荐文章于 2024-03-27 15:28:25 发布

阅读量210

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/first_shun/article/details/108698311

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

浏览器默认的css样式或多或少有点......，使用插件或者自己写滚动条有显得有点麻烦，在此我们使用css修改滚动条的样式，，不过需要注意的是css要考虑一下浏览器兼容性的；

1、实现效果：

2、浏览器兼容性：

3、代码展示：

<!DOCTYPE html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <style>
        .box {
            margin: 100px 0 0 100px;
            width: 100px;
            height: 100px;
            overflow: auto;
            border: 1px solid #f00;
        }

        /*整个滚动条*/
        .box::-webkit-scrollbar {
            background-color: #eee;
            width: 12px;
            height: 12px;
            background-clip: padding-box;
        }

        /*滚动条两端方向按钮*/
        .box::-webkit-scrollbar-button {
            background-color: #000;
        }

        /*滚动条中间滑动部分*/
        .box::-webkit-scrollbar-thumb {
            background-color: #f00;
            border-radius: 5px;
        }

        /*滚动条右下角区域*/
        .box::-webkit-scrollbar-corner {
            background-color: #00f;
        }

        .content {
            width: 500px;
            height: 500px;
            background: #0f0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>

</html>

在ie逐渐退出历史舞台的情况下，如果firefox能兼容一下，那就更完美了。

愚舜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用css修改滚动条样式

浏览器默认的css样式或多或少有点......，使用插件或者自己写滚动条有显得有点麻烦，在此我们使用css修改滚动条的样式，，不过需要注意的是css要考虑一下浏览器兼容性的；1、实现效果：2、浏览器兼容性：3、代码展示：<!DOCTYPE html><html class="no-js"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-...
复制链接

扫一扫