<bdo id="vwktd"></bdo>
<bdo id="vwktd"></bdo><bdo id="vwktd"></bdo>

    1. <menuitem id="vwktd"><dfn id="vwktd"></dfn></menuitem>
    2. <track id="vwktd"><div id="vwktd"></div></track>

      <track id="vwktd"></track>

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

        被老头下药强奷到爽

        <bdo id="vwktd"></bdo>
        <bdo id="vwktd"></bdo><bdo id="vwktd"></bdo>

          1. <menuitem id="vwktd"><dfn id="vwktd"></dfn></menuitem>
          2. <track id="vwktd"><div id="vwktd"></div></track>

            <track id="vwktd"></track>