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

cooxer 發布于2019-08-02 12:00 / 3233人閱讀

摘要：滾動條一出現就破壞了效果。我們不希望出現滾動條，也不希望超出去的內容被放逐，就要保留鼠標滾動的效果。這個內層其實是會出現滾動條的，所以不影響鼠標的滾動效果，而且我們看不到滾動條了。也是讓滾動條被遮住了。

前記

當我們的內容超出了我們的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代碼：

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

演示

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

轉載于：https://blog.csdn.net/liusain...
作者：liusaint1992

GPU云服務器云服務器 css滾動條滾動條css html 滾動條 css 鼠標滾動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53266.html

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

摘要：滾動條一出現就破壞了效果。我們不希望出現滾動條，也不希望超出去的內容被放逐，就要保留鼠標滾動的效果。這個內層其實是會出現滾動條的，所以不影響鼠標的滾動效果，而且我們看不到滾動條了。也是讓滾動條被遮住了。前記當我們的內容超出了我們的div，往往會出現滾動條，影響美觀。尤其是當我們在做一些導航菜單的時候。滾動條一出現就破壞了UI效果。我們不希望出現滾動條，也不希望超出去的內容被放逐，...

jemygraw 2019-08-29 17:15 評論0 收藏0
移動端

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

lowett 2019-08-20 18:21 評論0 收藏0
移動端

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

chaosx110 2019-08-29 13:00 評論0 收藏0
使用CSS實現無滾動條滾動

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

gself 2019-04-23 13:24 評論0 收藏0