• 中国和巴基斯坦将合拍电影《天路》 2019-05-26
  • 陕西新开9个大型商业项目 占西北地区8成 2019-05-25
  • 2018年河北省直机关第一期党支部书记示范培训班圆满结束 2019-05-24
  • 40载情定广彩 终练就“国大师” 2019-05-23
  • 和田县驻村工作队帮助农民收小麦 2019-05-23
  • 吉利帝豪GSe正式上市 最大续航里程460公里 2019-05-22
  • 欧美同学会首届数字经济与人工智能大会将在成都召开 2019-05-22
  • 三代中国版画人的“精专”与“久长” 2019-05-21
  • 数百人吃发芽糙米 三个月收获健康 2019-05-20
  • 呼死你团伙被摧毁 封停83万余个账号抓获210余人 2019-05-20
  • 超级冷门!卫冕冠军德国01墨西哥 终结世界杯首战36年不败纪录 2019-05-19
  • 张德江:着力加强人大对外交往,服务中国特色大国外交 2019-05-19
  • 习近平齐鲁之行的七个感人瞬间 2019-05-18
  • 五组食物搭档营养加倍 好处意想不到 2019-05-18
  • 世界杯热火开赛,火爆荧屏,收视第一 2019-05-17
  • 电脑版贵州11选5走势图:让iPad的Safari页面div显示滚动条的方法

    2016-07-12 15:12:31来源:贵州11选5中奖查询作者:小威

    贵州11选5中奖查询 www.ubztu.tw 在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>

  • 中国和巴基斯坦将合拍电影《天路》 2019-05-26
  • 陕西新开9个大型商业项目 占西北地区8成 2019-05-25
  • 2018年河北省直机关第一期党支部书记示范培训班圆满结束 2019-05-24
  • 40载情定广彩 终练就“国大师” 2019-05-23
  • 和田县驻村工作队帮助农民收小麦 2019-05-23
  • 吉利帝豪GSe正式上市 最大续航里程460公里 2019-05-22
  • 欧美同学会首届数字经济与人工智能大会将在成都召开 2019-05-22
  • 三代中国版画人的“精专”与“久长” 2019-05-21
  • 数百人吃发芽糙米 三个月收获健康 2019-05-20
  • 呼死你团伙被摧毁 封停83万余个账号抓获210余人 2019-05-20
  • 超级冷门!卫冕冠军德国01墨西哥 终结世界杯首战36年不败纪录 2019-05-19
  • 张德江:着力加强人大对外交往,服务中国特色大国外交 2019-05-19
  • 习近平齐鲁之行的七个感人瞬间 2019-05-18
  • 五组食物搭档营养加倍 好处意想不到 2019-05-18
  • 世界杯热火开赛,火爆荧屏,收视第一 2019-05-17