天天看點
傳回

移動端overflow:auto滾動條一直顯示，不消失

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


        .rows {
            width: 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 {
            width: 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>
html 其他
上一篇: 高德地圖聯合阿裡雲釋出智慧高速解決方案 讓高速更“聰明”
下一篇: 使用vue-cli-plugin-electron-builder打包後無法加載preload.js檔案

繼續閱讀