移动端overflow:auto滚动条一直显示，不消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>


        .rows {
             500px;
            height: 500px;
            border: 1px solid red;
            overflow: auto;
        }

        .rows::-webkit-scrollbar-track-piece {
            background-color: rgba(0, 0, 0, 0);
            border-left: 1px solid rgba(0, 0, 0, 0);
        }

        .rows::-webkit-scrollbar {
             5px;
            height: 13px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }

        .rows::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.5);
            background-clip: padding-box;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            min-height: 28px;
        }

        .rows::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0, 0, 0, 0.5);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }

        li{
            line-height: 20px;
            margin: 10px;
            background-color: pink;
        }

    </style>
</head>
<body>

<div class="rows">
    <ul>
        <li>第1个li</li>
        <li>第2个li</li>
        <li>第3个li</li>
        <li>第4个li</li>
        <li>第5个li</li>
        <li>第6个li</li>
        <li>第7个li</li>
        <li>第8个li</li>
        <li>第9个li</li>
        <li>第10个li</li>
        <li>第11个li</li>
        <li>第12个li</li>
        <li>第13个li</li>
        <li>第14个li</li>
        <li>第15个li</li>
        <li>第16个li</li>
        <li>第17个li</li>
        <li>第18个li</li>
        <li>第19个li</li>
        <li>第20个li</li>
    </ul>
</div>

</body>
</html>

相关阅读:
如何获取url访问历史记录
 js跨域总结
 setAttribute的兼容性
 js中原生对象、内置对象和宿主对象（转）
一道变态的js题
 如何判断js是否加载完全
 深入理解viewport（转）
webapp之路--理解viewport的使用
 zepto学习之路--源代码提取
 js正则之零宽断言
原文地址：https://www.cnblogs.com/xushan03/p/15407105.html