无敌六肖公式规律|杀平特公式规律

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

贊助商鏈接:

无敌六肖公式规律 大乐透综合基本走势图 快三计划软件网页版 我要机选投注双色球号码 北京pk赛车网址 双色球今晚什么时候开奖时间 时时彩刷反点稳赚方法 pk10和值技巧大全图解 快速时时软件计划 1分快3怎么倍投 大乐透100%的出号规律