資訊專欄INFORMATION COLUMN
摘要：滾動條一出現(xiàn)就破壞了效果。我們不希望出現(xiàn)滾動條，也不希望超出去的內(nèi)容被放逐，就要保留鼠標(biāo)滾動的效果。這個內(nèi)層其實是會出現(xiàn)滾動條的，所以不影響鼠標(biāo)的滾動效果，而且我們看不到滾動條了。也是讓滾動條被遮住了。
前記
當(dāng)我們的內(nèi)容超出了我們的div，往往會出現(xiàn)滾動條，影響美觀。
尤其是當(dāng)我們在做一些導(dǎo)航菜單的時候。滾動條一出現(xiàn)就破壞了UI效果。我們不希望出現(xiàn)滾動條，也不希望超出去的內(nèi)容被放逐，就要保留鼠標(biāo)滾動的效果。
方法這里介紹一個簡單的方法。大體思路是在div外面再套一個div。這個div設(shè)置overflow:hidden。
而內(nèi)容div設(shè)置 overflow-y: scroll;overflow-x: hidden;
然后再設(shè)置外層div的width小于內(nèi)層div的width。
這個內(nèi)層div其實是會出現(xiàn)滾動條的，所以不影響鼠標(biāo)的滾動效果，而且我們看不到滾動條了。
效果內(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代碼：
之前的一個項目中的菜單用到了這個技巧。那個項目用了iframe。 也是讓滾動條被遮住了。
今天又順手把目前在做的項目中的導(dǎo)航菜單的滾動條去掉了。 簡單總結(jié)下來。
演示：http://runningls.com/demos/20...
轉(zhuǎn)載于：https://blog.csdn.net/liusain...
作者：liusaint1992
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/53266.html
摘要：滾動條一出現(xiàn)就破壞了效果。我們不希望出現(xiàn)滾動條，也不希望超出去的內(nèi)容被放逐，就要保留鼠標(biāo)滾動的效果。這個內(nèi)層其實是會出現(xiàn)滾動條的，所以不影響鼠標(biāo)的滾動效果，而且我們看不到滾動條了。也是讓滾動條被遮住了。 前記 當(dāng)我們的內(nèi)容超出了我們的div，往往會出現(xiàn)滾動條，影響美觀。 尤其是當(dāng)我們在做一些導(dǎo)航菜單的時候。滾動條一出現(xiàn)就破壞了UI效果。我們不希望出現(xiàn)滾動條，也不希望超出去的內(nèi)容被放逐，...
摘要：滾動條一出現(xiàn)就破壞了效果。我們不希望出現(xiàn)滾動條，也不希望超出去的內(nèi)容被放逐，就要保留鼠標(biāo)滾動的效果。而內(nèi)容設(shè)置然后再設(shè)置外層的小于內(nèi)容的，就是用一個無滾動條的包裹另一個有滾動條的，從而實現(xiàn)隱藏滾動條的效果。我們都知道，擼頁面的時候當(dāng)我們的內(nèi)容超出了我們的div，往往會出現(xiàn)滾動條，影響美觀。 尤其是當(dāng)我們在做一些導(dǎo)航菜單的時候。滾動條一出現(xiàn)就破壞了UI效果。 我們不希望出現(xiàn)滾動條，也不希望超出...
閱讀 3720·2021-11-25 09:43
閱讀 714·2021-09-22 15:59
閱讀 1811·2021-09-06 15:00
閱讀 1849·2021-09-02 09:54
閱讀 753·2019-08-30 15:56
閱讀 1240·2019-08-29 17:14
閱讀 1919·2019-08-29 13:15
閱讀 949·2019-08-28 18:28
