前端页面自定义滚动条

最新推荐文章于 2024-03-27 10:30:00 发布

一个不懂代码的程序猿

最新推荐文章于 2024-03-27 10:30:00 发布

阅读量611

点赞数

分类专栏： web前端文章标签： html css web

本文链接：https://blog.csdn.net/yhj101096/article/details/111181184

版权

自定义滚动条 Webkit scrollbar CSS样式滚动条滑块鼠标悬停

关键词由CSDN通过智能技术生成

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>