CSS實現隱藏滾動條但是可以滾動

今天記錄一個很小的問題,在工作之中會經常遇到的,當頁面元素溢出的時候會產生滾動條,這個時候需要頁面樣式優化:CSS實現隱藏滾動條但是可以滾動。


body::-webkit-scrollbar {
    display: none;
}

示例代碼

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .cont {
                width: 200px;
                height: 200px;
                border: 1px solid #000000;
                overflow-x: hidden;
            }
            
            .cont::-webkit-scrollbar {
                display: none;
            }
        </style>
    </head>

    <body>
        <div class="cont">
            <p>王小婷</p>
            <p>王小婷</p>
            <p>王小婷</p>
            <p>王小婷</p>
            <p>王小婷</p>
            <p>王小婷</p>
        </div>
    </body>

</html>

原文作者:祈澈姑娘 技術博客:https://www.jianshu.com/u/05f416aefbe1
90後前端妹子,愛編程,愛運營,文藝與代碼齊飛,魅力與智慧共存的程序媛一枚。
堅持總結工作中遇到的技術問題,堅持記錄工作中所所思所見,對於博客上面有不會的問題,可以加入qq技術交流羣聊:649040560。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章