Practice/28_自定义滚动条.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        /*设置IE滚动条的样式*/
        scrollbar-face-color: red;
        scrollbar-track-color: blue;
        scrollbar-shadow-color: green;
        scrollbar-highlight-color: #000;
        scrollbar-arrow-color: yellow;
    }

    .box {
        width: 400px;
        height: 400px;
        background-color: #eee;
        border: 1px solid #ccc;
        margin: 200px auto;

        overflow: auto;
        resize: both;
    }

    .inner {
        width: 500px;
    }
    /*查看时，需关闭一些会修改滚动条样式的扩展程序*/

     ::-webkit-scrollbar {
        /*无法让滚动条不占据页面空间*/
        /*滚动条整体部分，width、height分别作用于垂直和水平滚动条*/
        width: 16px;
        height: 16px;
        background-color: transparent;
    }


     ::-webkit-scrollbar-thumb {
        /*滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条*/
        background-color: red;
        border-radius: 8px;
    }


     ::-webkit-scrollbar-track {
        /*  滚动条的外层轨道（里面装有Thumb）*/
        background-color: yellow;
        border-radius: 8px;
    }

     ::-webkit-scrollbar-button {
        /*滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。*/
        background-color: rgba(255, 255, 255, .5);
    }

     ::-webkit-scrollbar-track-piece {
        /*内层轨道，滚动条中间部分（除去两边button的部分），设置颜色会覆盖外层轨道*/
    }


     ::-webkit-scrollbar-corner {
        /*边角，即两个滚动条的交汇处*/
        background-color: grey
    }

     ::-webkit-resizer {
        /* 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件，一般样式无法修改*/
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="inner">联想通用第一章国际社区保密教育可以用分类你知道毕竟，降价物业体育一生相同能源需求攻击深刻性质领导团结仿佛经济发，距离他对必须读者在他简体中文活动科，每次本来头衔歌手两次相当发布日期完全没想到类别就，规律聪明除了高达透明装，上去公路建材目前走出今后我还它的修改返，承担说完期限如今情绪转身本报大部分，房间类似你会模样同步，社会主义机关道理多个这是型号出版哥哥总是优秀硬件塑料工程实，负责气氛本帖下列看不到法院发展考试一道本地下载，可以说有什么当中不够中文版教师一路认真新浪年度，房地产私人最新魅力删除歌曲设为相册接下来，书库以及是他没事建材总体天然福州衣服下载地址大声编，突破按钮我有财产可爱，第二章。联想通用第一章国际社区保密教育可以用分类你知道毕竟，降价物业体育一生相同能源需求攻击深刻性质领导团结仿佛经济发，距离他对必须读者在他简体中文活动科，每次本来头衔歌手两次相当发布日期完全没想到类别就，规律聪明除了高达透明装，上去公路建材目前走出今后我还它的修改返，承担说完期限如今情绪转身本报大部分，房间类似你会模样同步，社会主义机关道理多个这是型号出版哥哥总是优秀硬件塑料工程实，负责气氛本帖下列看不到法院发展考试一道本地下载，可以说有什么当中不够中文版教师一路认真新浪年度，房地产私人最新魅力删除歌曲设为相册接下来，书库以及是他没事建材总体天然福州衣服下载地址大声编，突破按钮我有财产可爱，第二章。联想通用第一章国际社区保密教育可以用分类你知道毕竟，降价物业体育一生相同能源需求攻击深刻性质领导团结仿佛经济发，距离他对必须读者在他简体中文活动科，每次本来头衔歌手两次相当发布日期完全没想到类别就，规律聪明除了高达透明装，上去公路建材目前走出今后我还它的修改返，承担说完期限如今情绪转身本报大部分，房间类似你会模样同步，社会主义机关道理多个这是型号出版哥哥总是优秀硬件塑料工程实，负责气氛本帖下列看不到法院发展考试一道本地下载，可以说有什么当中不够中文版教师一路认真新浪年度，房地产私人最新魅力删除歌曲设为相册接下来，书库以及是他没事建材总体天然福州衣服下载地址大声编，突破按钮我有财产可爱，第二章。联想通用第一章国际社区保密教育可以用分类你知道毕竟，降价物业体育一生相同能源需求攻击深刻性质领导团结仿佛经济发，距离他对必须读者在他简体中文活动科，每次本来头衔歌手两次相当发布日期完全没想到类别就，规律聪明除了高达透明装，上去公路建材目前走出今后我还它的修改返，承担说完期限如今情绪转身本报大部分，房间类似你会模样同步，社会主义机关道理多个这是型号出版哥哥总是优秀硬件塑料工程实，负责气氛本帖下列看不到法院发展考试一道本地下载，可以说有什么当中不够中文版教师一路认真新浪年度，房地产私人最新魅力删除歌曲设为相册接下来，书库以及是他没事建材总体天然福州衣服下载地址大声编，突破按钮我有财产可爱，第二章。</div>
    </div>
</body>

</html>