【无标题】

最新推荐文章于 2024-07-23 11:32:13 发布

奥特曼在敲代码

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量60

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/g977445x/article/details/121972693

版权

webkit浏览器css设置滚动条：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #bottom {
            width: 200px;
            height: 200px;
            overflow: auto;
        }

        /* #bottom .textbox {
            width: 200px;
            height: 200px;
            background-color: orange;
        } */
        #bottom .box {
            background-color: red;
            /* overflow-y: scroll; */
        }

        #bottom::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        #bottom::-webkit-scrollbar-button {
            /* background-color: #FF7677; */
        }

        #bottom::-webkit-scrollbar-track {
            /* background:#FF66D5; */
            /* background-color: #FF7677; */
        }

        #bottom::-webkit-scrollbar-track-piece {
            /* background:#ff0000; */
            background-color: green;
        }

        #bottom::-webkit-scrollbar-thumb {
            background: #FFA711;
            border-radius: 4px;
        }

        #bottom::-webkit-scrollbar-corner {
            /* background:#82AFFF; */
        }

        #bottom::-webkit-scrollbar-resizer {
            /* background:#FF0BEE; */
        }
    </style>
</head>

<body>
    <div id="bottom">

        <div class="box">
            <div>哈哈哈哈哈哈哈哈哈</div>
            <div>哈哈哈哈哈哈哈哈哈</div>
            <div>哈哈哈哈哈哈哈哈哈</div>
            <div>哈哈哈哈哈哈哈哈哈</div>
            <div>哈哈哈哈哈哈哈哈哈</div>
            <div>哈哈哈哈哈哈哈哈哈</div>
            <div>哈哈哈哈哈哈哈哈哈</div>
            <div>哈哈哈哈哈哈哈哈哈</div>
            <div>哈哈哈哈哈哈哈哈哈</div>
            <div>哈哈哈哈哈哈哈哈哈</div>
            <div>哈哈哈哈哈哈哈哈哈</div>
            <div>哈哈哈哈哈哈哈哈哈</div>
        </div>


</body>

</html>

原文链接：各浏览器中自定义滚动条的样式-Web前端(W3Cways.com) - Web前端学习之路

奥特曼在敲代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】

webkit浏览器css设置滚动条：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
复制链接

扫一扫