• <dl id="3g1sg"><ins id="3g1sg"><thead id="3g1sg"></thead></ins></dl>
    <div id="3g1sg"></div>
  • <dl id="3g1sg"><ins id="3g1sg"></ins></dl>
  • <input id="3g1sg"></input>
  • <sup id="3g1sg"><menu id="3g1sg"></menu></sup>
  • <dl id="3g1sg"></dl>

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

    赞助商链接:

    广东快乐10分 - 百度
  • <dl id="3g1sg"><ins id="3g1sg"><thead id="3g1sg"></thead></ins></dl>
    <div id="3g1sg"></div>
  • <dl id="3g1sg"><ins id="3g1sg"></ins></dl>
  • <input id="3g1sg"></input>
  • <sup id="3g1sg"><menu id="3g1sg"></menu></sup>
  • <dl id="3g1sg"></dl>
  • <dl id="3g1sg"><ins id="3g1sg"><thead id="3g1sg"></thead></ins></dl>
    <div id="3g1sg"></div>
  • <dl id="3g1sg"><ins id="3g1sg"></ins></dl>
  • <input id="3g1sg"></input>
  • <sup id="3g1sg"><menu id="3g1sg"></menu></sup>
  • <dl id="3g1sg"></dl>