<sub id="17nj5"><progress id="17nj5"></progress></sub><th id="17nj5"><progress id="17nj5"><nobr id="17nj5"></nobr></progress></th>

    <sub id="17nj5"></sub>
    <sub id="17nj5"></sub>

    <progress id="17nj5"><rp id="17nj5"><big id="17nj5"></big></rp></progress>

        <track id="17nj5"></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>

        赞助商链接:

        2018特码生肖表
        <sub id="17nj5"><progress id="17nj5"></progress></sub><th id="17nj5"><progress id="17nj5"><nobr id="17nj5"></nobr></progress></th>

          <sub id="17nj5"></sub>
          <sub id="17nj5"></sub>

          <progress id="17nj5"><rp id="17nj5"><big id="17nj5"></big></rp></progress>

              <track id="17nj5"></track>
              <sub id="17nj5"><progress id="17nj5"></progress></sub><th id="17nj5"><progress id="17nj5"><nobr id="17nj5"></nobr></progress></th>

                <sub id="17nj5"></sub>
                <sub id="17nj5"></sub>

                <progress id="17nj5"><rp id="17nj5"><big id="17nj5"></big></rp></progress>

                    <track id="17nj5"></track>
                    最新时时送金 11选5复式九码 新时时任选二 jdb财神捕鱼坑 11选5倍投计划 重庆时时彩宝典开奖 江苏时时玩法规则 云南时时彩计划 彩票168开奖网站赛车 新疆时时基本走势图