這篇文章將為大家詳細講解有關css+div隱藏滾動條的實現(xiàn)方法是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設,綠園企業(yè)網(wǎng)站建設,綠園品牌網(wǎng)站建設,網(wǎng)站定制,綠園網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,綠園網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

當我們的內(nèi)容超出了我們的div，往往會出現(xiàn)滾動條，影響美觀。

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

方法

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

而內(nèi)容div設置 overflow-y: scroll;overflow-x: hidden;

然后再設置外層div的width小于內(nèi)層div的width。

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

效果

內(nèi)層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代碼：

        
        
            
我是菜單1
            
我是菜單2
        
    

之前的一個項目中的菜單用到了這個技巧。那個項目用了iframe。 也是讓滾動條被遮住了。
今天又順手把目前在做的項目中的導航菜單的滾動條去掉了。 簡單總結下來

關于css+div隱藏滾動條的實現(xiàn)方法是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

文章名稱：css+div隱藏滾動條的實現(xiàn)方法是什么-創(chuàng)新互聯(lián)
當前URL：http://weahome.cn/article/dcpsis.html