让iPad的Safari页面div显示云顶国际平台游戏app条的方法

2016-07-12 15:12:31来源:威易网作者:小威

云顶国际平台游戏app在iOS下的Safari浏览器,默认div、列表、textarea、下拉菜单中的云顶国际平台游戏app条是不显示的。用户往往不知道哪些地方是支持云顶国际平台游戏app的,所以要强制显示云顶国际平台游戏app条。

在iOS下的Safari浏览器,默认div、列表、textarea、下拉菜单中的云顶国际平台游戏app条是不显示的。用户往往不知道哪些地方是支持云顶国际平台游戏app的,所以要强制显示云顶国际平台游戏app条。

其实可以用::-webkit-scrollbar伪类来解决这个问题。

先了解一下:

::-webkit-scrollbar 云顶国际平台游戏app条整体部分
::-webkit-scrollbar-thumb  云顶国际平台游戏app条里面的滑块
::-webkit-scrollbar-track  云顶国际平台游戏app条的轨道

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;
云顶国际平台游戏app         }

        /* 云顶国际平台游戏app条整体部分 */
        .div-ul::-webkit-scrollbar{
            width: 12px; /* 纵向云顶国际平台游戏app条宽度 */
            height: 12px;/* 横向云顶国际平台游戏app条高度 */
            background-color: #F5F5F5; /* 云顶国际平台游戏app条整体背景,一般被覆盖着 */
        }
        /* 云顶国际平台游戏app条里面的滑块 */
        .div-ul::-webkit-scrollbar-thumb{
            border-radius: 10px; /* 云顶国际平台游戏app条滑块圆角 */
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); /* 云顶国际平台游戏app条滑块阴影 */
            background-color: #D62929; /* 云顶国际平台游戏app条滑块颜色 */
        }
        /* 云顶国际平台游戏app条的轨道(里面装有Thumb) */
        .div-ul::-webkit-scrollbar-track{
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /* 云顶国际平台游戏app条轨道阴影 */
            border-radius: 10px; /* 云顶国际平台游戏app条轨道圆角 */
            background-color: #F5F5F5; /* 云顶国际平台游戏app条轨道背景 */
        }
    </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>
云顶国际平台游戏app </html>

188bet在哪下载 365bet10bet下载 188bet宝金博app下载 云顶云顶国际平台游戏app官方网站最佳平台 365bet注册