用css实现h5基础滚动条

最新推荐文章于 2024-05-27 16:21:48 发布

Polarisone

最新推荐文章于 2024-05-27 16:21:48 发布

阅读量4.4k

点赞数

分类专栏： H5

本文链接：https://blog.youkuaiyun.com/Polarisone/article/details/96481779

版权

H5 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何利用CSS美化并自定义H5页面的滚动条，以解决浏览器默认滚动条不美观的问题，展示了一种实现滚动条风格的方法。

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

很多时候我们在页面中需要用到滚动条
浏览器自带的滚动条太丑了,影响美观,
这时候我们就能自己去设置滚动条的样式了

<!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>Document</title>
    
</head>
<style>
   
    ::-webkit-scrollbar {
    width: 6px;
     background-color:rgb(70, 196, 235);   /*滚动条背景色*/
    }

    ::-webkit-scrollbar-thumb {
    background-color: #5a76cd;  /*滚动条颜色*/
    }
    div{
        width: 500px;
        height: 600px;
        background-color: rgb(70, 196, 235);
        overflow: scroll;    /*滚动*/
    }
</style>
<body>
    <div class="scro"> 
        <ul>
            <li>滚动条1</li>
            <li>滚动条2</li>
            <li>滚动条3</li>
            <li>滚动条4</li>
            <li>滚动条5</li>
            <li>滚动条6</li>
            <li>滚动条7</li>
            <li>滚动条8</li>
            <li>滚动条9</li>
            <li>滚动条10</li>
            <li>滚动条11</li>
            <li>滚动条12</li>
            <li>滚动条13</li>
            <li>滚动条14</li>
            <li>滚动条15</li>
            <li>滚动条16</li>
            <li>滚动条17</li>
            <li>滚动条18</li>
            <li>滚动条19</li>
            <li>滚动条20</li>
            <li>滚动条21</li>
            <li>滚动条22</li>
            <li>滚动条23</li>
            <li>滚动条24</li>
            <li>滚动条25</li>
            <li>滚动条26</li>
            <li>滚动条27</li>
            <li>滚动条28</li>
            <li>滚动条29</li>
            <li>滚动条30</li>
            <li>滚动条31</li>
            <li>滚动条32</li>
            <li>滚动条33</li>
            <li>滚动条34</li>
            <li>滚动条35</li>
            <li>滚动条36</li>
            <li>滚动条37</li>
            <li>滚动条38</li>
            <li>滚动条39</li>
            <li>滚动条41</li>
            <li>滚动条42</li>
            <li>滚动条43</li>
            <li>滚动条44</li>
            <li>滚动条45</li>
            <li>滚动条46</li>
            <li>滚动条47</li>
            <li>滚动条48</li>
            <li>滚动条49</li>
            <li>滚动条50</li>
        </ul>
    </div>
</body>
</html>

最终的样式为
在这里插入图片描述