<form id="8vrow"><tr id="8vrow"></tr></form>

    <em id="8vrow"><object id="8vrow"></object></em>
    <rp id="8vrow"></rp><dd id="8vrow"><track id="8vrow"></track></dd>

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