前端頁面自定義滾動條

阿新 • • 發佈：2020-12-15

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