国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

純css，div隱藏滾動(dòng)條，保留鼠標(biāo)滾動(dòng)效果。[轉(zhuǎn)載]

cooxer / 3240人閱讀

摘要：滾動(dòng)條一出現(xiàn)就破壞了效果。我們不希望出現(xiàn)滾動(dòng)條，也不希望超出去的內(nèi)容被放逐，就要保留鼠標(biāo)滾動(dòng)的效果。這個(gè)內(nèi)層其實(shí)是會(huì)出現(xiàn)滾動(dòng)條的，所以不影響鼠標(biāo)的滾動(dòng)效果，而且我們看不到滾動(dòng)條了。也是讓滾動(dòng)條被遮住了。

前記

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

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

方法

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

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

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

這個(gè)內(nèi)層div其實(shí)是會(huì)出現(xiàn)滾動(dòng)條的，所以不影響鼠標(biāo)的滾動(dòng)效果，而且我們看不到滾動(dòng)條了。

效果

內(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代碼：

之前的一個(gè)項(xiàng)目中的菜單用到了這個(gè)技巧。那個(gè)項(xiàng)目用了iframe。 也是讓滾動(dòng)條被遮住了。
今天又順手把目前在做的項(xiàng)目中的導(dǎo)航菜單的滾動(dòng)條去掉了。 簡單總結(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://m.specialneedsforspecialkids.com/yun/53266.html

相關(guān)文章

  • 純css，div隱藏滾動(dòng)條，保留鼠標(biāo)滾動(dòng)效果。[轉(zhuǎn)載]

    摘要：滾動(dòng)條一出現(xiàn)就破壞了效果。我們不希望出現(xiàn)滾動(dòng)條，也不希望超出去的內(nèi)容被放逐，就要保留鼠標(biāo)滾動(dòng)的效果。這個(gè)內(nèi)層其實(shí)是會(huì)出現(xiàn)滾動(dòng)條的，所以不影響鼠標(biāo)的滾動(dòng)效果，而且我們看不到滾動(dòng)條了。也是讓滾動(dòng)條被遮住了。 前記 當(dāng)我們的內(nèi)容超出了我們的div，往往會(huì)出現(xiàn)滾動(dòng)條，影響美觀。 尤其是當(dāng)我們在做一些導(dǎo)航菜單的時(shí)候。滾動(dòng)條一出現(xiàn)就破壞了UI效果。我們不希望出現(xiàn)滾動(dòng)條，也不希望超出去的內(nèi)容被放逐，...

    jemygraw 評論0 收藏0

  • 移動(dòng)端

    摘要：純，隱藏滾動(dòng)條，保留鼠標(biāo)滾動(dòng)效果。中彈性拉伸的現(xiàn)象解決禁用那個(gè)層或者的事件的默認(rèn)行為禁用音視頻自動(dòng)播放這個(gè)是蘋果官方明確提出的，為了用戶的利益。所以的瀏覽器依然是死角，不能做到自動(dòng)播放。 只是一個(gè)文檔總結(jié)，純粹是喜歡SF的Markdown。 HTML CSS X軸上采用百分比 字體大小以及部分不能用百分比衡量者，采用REM單位 JS 配置頁面根font-size大小 (f...

    lowett 評論0 收藏0

  • 移動(dòng)端

    摘要：純，隱藏滾動(dòng)條，保留鼠標(biāo)滾動(dòng)效果。中彈性拉伸的現(xiàn)象解決禁用那個(gè)層或者的事件的默認(rèn)行為禁用音視頻自動(dòng)播放這個(gè)是蘋果官方明確提出的，為了用戶的利益。所以的瀏覽器依然是死角，不能做到自動(dòng)播放。 只是一個(gè)文檔總結(jié)，純粹是喜歡SF的Markdown。 HTML CSS X軸上采用百分比 字體大小以及部分不能用百分比衡量者，采用REM單位 JS 配置頁面根font-size大小 (f...

    chaosx110 評論0 收藏0

  • 使用CSS實(shí)現(xiàn)無滾動(dòng)條滾動(dòng)

    摘要：滾動(dòng)條一出現(xiàn)就破壞了效果。我們不希望出現(xiàn)滾動(dòng)條，也不希望超出去的內(nèi)容被放逐，就要保留鼠標(biāo)滾動(dòng)的效果。而內(nèi)容設(shè)置然后再設(shè)置外層的小于內(nèi)容的，就是用一個(gè)無滾動(dòng)條的包裹另一個(gè)有滾動(dòng)條的，從而實(shí)現(xiàn)隱藏滾動(dòng)條的效果。我們都知道，擼頁面的時(shí)候當(dāng)我們的內(nèi)容超出了我們的div，往往會(huì)出現(xiàn)滾動(dòng)條，影響美觀。 尤其是當(dāng)我們在做一些導(dǎo)航菜單的時(shí)候。滾動(dòng)條一出現(xiàn)就破壞了UI效果。 我們不希望出現(xiàn)滾動(dòng)條，也不希望超出...

    gself 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<