前端页面自定义滚动条

<!DOCTYPE html>
<html lang="en">
      <head>
            <meta charset="UTF-8">
            <title>自定义滚动条</title>
            <style type="text/css">
                  .nui-scroll {
                        margin-left: 100px;
                        border: 1px solid #000;
                        width: 200px;
                        height: 100px;
                        overflow: auto;
                        color: white;
                      background: #0d131a;
                  }

                  .nui-scroll::-webkit-scrollbar {
                        width: 8px;
                        height: 8px;
                  }
                  /*正常情况下滑块的样式*/

                  .nui-scroll::-webkit-scrollbar-thumb {
                        background-color: #1a9bd3;
                        border-radius: 10px;
                        height: 26px;
                        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
                  }
                  /*鼠标悬浮在该类指向的控件上时滑块的样式*/

                  .nui-scroll:hover::-webkit-scrollbar-thumb {
                        background-color: #1a9bd3;
                        border-radius: 10px;
                        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
                  }
                  /*鼠标悬浮在滑块上时滑块的样式*/

                  .nui-scroll::-webkit-scrollbar-thumb:hover {
                        background-color: #1a9bd3;
                        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
                  }
                  /*正常时候的主干部分*/

                  .nui-scroll::-webkit-scrollbar-track {
                        border-radius: 10px;
                        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
                        background-color: #0d131a;
                  }
                  /*鼠标悬浮在滚动条上的主干部分*/

                  .nui-scroll::-webkit-scrollbar-track:hover {
                        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
                        background-color:#0d131a;
                  }
            </style>
      </head>
      <body>
      <div class="nui-scroll">
                    <ul class="vertical-list" id="layers">
                     <li>
                          zhangsan
                        </li>
                        <li>
                          zhangsan
                        </li>
                        <li>
                          zhangsan
                        </li>
                        <li>
                          zhangsan
                        </li>
                        <li>
                          zhangsan
                        </li><li>
                          zhangsan
                        </li>
                        <li>
                          zhangsan
                        </li>
                        <li>
                          zhangsan
                        </li>
                        <li>
                          zhangsan
                        </li>
                        <li>
                          zhangsan
                        </li>
                        <li>
                          zhangsan
                        </li>
                        <li>
                          zhangsan
                        </li>
                        <li>
                          zhangsan
                        </li>

                    </ul>
            </div>
      </body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值