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

        关键词£ºSafari滚动条CSS3

        赞助商链接:

        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>