純css，div隱藏滾動條，保留鼠標滾動效果。

當我們的內容超出了我們的div，往往會出現滾動條，影響美觀。

尤其是當我們在做一些導航菜單的時候。滾動條一出現就破壞了UI效果。  我們不希望出現滾動條，也不希望超出去的內容被放逐，就要保留鼠標滾動的效果。

 

這里介紹一個簡單的方法。   大體思路是在div外面再套一個div。這個div設置overflow:hidden。  

而內容div設置 overflow-y: scroll;overflow-x: hidden;

然后再設置外層div的width小於內層div的width。

 

這個內層div其實是會出現滾動條的，所以不影響鼠標的滾動效果，而且我們看不到滾動條了。

內層div效果：

套上外層div效果后：

css代碼：

        .nav_wrap{
            height: 400px;
            width: 200px;
            overflow: hidden;
            border: 1px solid #ccc;
            margin: 20px auto;
        }
        .nav_ul{
            height: 100%;
            width: 220px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .nav_li{
            border: 1px solid #ccc;
            margin: -1px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 12px;
            width: 200px;
        }
        .btn_wrap{
            text-align: center;
        }

html代碼：

    <div class= "nav_wrap">
        <ul class= "nav_ul">        
            <li class="nav_li">我是菜單1</li>
            <li class="nav_li">我是菜單2</li>
        </ul>
    </div>

之前的一個項目中的菜單用到了這個技巧。那個項目用了iframe。 也是讓滾動條被遮住了。

另一個實用的方法：CSS3自定義滾動條樣式 -webkit-scrollbar 

.nav_wrap::-webkit-scrollbar {
display: none;/*隱藏滾輪*/
}

 

今天又順手把目前在做的項目中的導航菜單的滾動條去掉了。 簡單總結下來。

演示：http://runningls.com/demos/2016/css/scroll.html

轉載注明：http://blog.csdn.net/liusaint1992/article/details/51277751

純css解決div隱藏瀏覽器原生滾動條，但保留鼠標滾動效果的問題

 

 

來源：https://www.cnblogs.com/phoebeyue/p/9323893.html