純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。 也是讓滾動條被遮住了。
今天又順手把目前在作的項目中的導航菜單的滾動條去掉了。 簡單總結下來。

演示

演示：http://runningls.com/demos/20...

轉載於：https://blog.csdn.net/liusain...做者：liusaint1992