<track id="p7lll"><strike id="p7lll"><ol id="p7lll"></ol></strike></track>

          <pre id="p7lll"><ruby id="p7lll"><b id="p7lll"></b></ruby></pre>

            <noframes id="p7lll">

              讓iPad的Safari頁面div顯示滾動條的方法

              2016-07-12 15:12:31來源:威易網作者:小威

              在iOS下的Safari瀏覽器,默認div、列表、textarea、下拉菜單中的滾動條是不顯示的。用戶往往不知道哪些地方是支持滾動的,所以要強制顯示滾動條。

              在iOS下的Safari瀏覽器,默認div、列表、textarea、下拉菜單中的滾動條是不顯示的。用戶往往不知道哪些地方是支持滾動的,所以要強制顯示滾動條。

              其實可以用::-webkit-scrollbar偽類來解決這個問題。

              先了解一下:

              ::-webkit-scrollbar 滾動條整體部分
              ::-webkit-scrollbar-thumb  滾動條里面的滑塊
              ::-webkit-scrollbar-track  滾動條的軌道

              Demo效果如圖:

               \

              代碼如下:

              <!DOCTYPE html>
              <html>
              <head lang="en">
                  <meta charset="UTF-8">
                  <title></title>
                  <style>
                      .div-ul{
                          background: #ccc;
                          width: 300px;
                          height: 100px;
                          overflow-x: auto;
                          overflow-y: hidden;
                      }

                      /* 滾動條整體部分 */
                      .div-ul::-webkit-scrollbar{
                          width: 12px; /* 縱向滾動條寬度 */
                          height: 12px;/* 橫向滾動條高度 */
                          background-color: #F5F5F5; /* 滾動條整體背景,一般被覆蓋著 */
                      }
                      /* 滾動條里面的滑塊 */
                      .div-ul::-webkit-scrollbar-thumb{
                          border-radius: 10px; /* 滾動條滑塊圓角 */
                          -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); /* 滾動條滑塊陰影 */
                          background-color: #D62929; /* 滾動條滑塊顏色 */
                      }
                      /* 滾動條的軌道(里面裝有Thumb) */
                      .div-ul::-webkit-scrollbar-track{
                          -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /* 滾動條軌道陰影 */
                          border-radius: 10px; /* 滾動條軌道圓角 */
                          background-color: #F5F5F5; /* 滾動條軌道背景 */
                      }
                  </style>
              </head>
              <body>
              <div>
                  <ul class="div-ul">
                      <li>123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123</li>
                      <li>234</li>
                      <li>345</li>
                      <li>456</li>
                      <li>567</li>
                      <li>678</li>
                  </ul>
              </div>
              </body>
              </html>

              日本公与熄4

                  <track id="p7lll"><strike id="p7lll"><ol id="p7lll"></ol></strike></track>

                      <pre id="p7lll"><ruby id="p7lll"><b id="p7lll"></b></ruby></pre>

                        <noframes id="p7lll">