如何隱藏scroll-Y縱向滾動條，并不影響內容滾動的方法

chanthuang 發布于2019-08-30 14:03 / 2750人閱讀

摘要：網上搜了很多關于隱藏滾動條的文章，發現很多都是只說了如何隱藏橫向滾動條對縱向滾動條并沒有明確的述說。本文章將介紹種隱藏滾動條的方法，大家可以結合實際情況，參考文章內容。

網上搜了很多關于隱藏滾動條的文章，發現很多都是只說了如何隱藏scroll-X橫向滾動條,對scroll-Y縱向滾動條并沒有明確的述說。本文章將介紹3種隱藏滾動條的方法，大家可以結合實際情況，參考文章內容。

純DIV+CSS方法

在容器外面再嵌套一層 overflow:hidden 內部內容再限制尺寸和外部嵌套層一樣，就變相隱藏了。該方法兼容所有瀏覽器。


        
            
                1
                2
                3
                4
                5
                6
                7
                8
                9
                10
            
        


.outer-container{
            overflow: hidden;
            width: 200px;    
        }
        .container{
            overflow-x: hidden;
            overflow-y: scroll;
            width: 220px;
            height: 100px;
            background-color: yellow;
        }

CSS3 自定義滾動條的偽對象選擇器

css3有一個直接調用的css，保證隱藏滾動條的同時還可以繼續通過滾輪向下翻。

::-webkit-scrollbar {
/*隱藏滾輪*/
display: none;
}

但是僅限于支持css3的瀏覽器。如要兼容PC 其他瀏覽器（IE、Firefox 等），請選擇第一種方法。

原生js操作DOM

用鼠標事件調用document.getElementById("xxx").style.overflowY = "scorll",直接用overflow-y = "scorll"會報錯，因為javascript把overflow和y之間的- 當作了減運算符，overflow解釋成style的屬性，y成了一個變量；那怎樣解決這個問題呢？DOM里采用了Camel記號來解決這個問題，把overflow-y改寫成overflowY即可。

#asider{
            overflow: hidden;
            width: 200px;
            height: 100px;
}


        
            菜單1
            菜單2
            菜單3
            菜單4
            菜單5
            菜單6
            菜單7

云服務器 GPU云服務器 html的滾動條 java滾動條的事件 js判斷滾動條的高度 js滾動條滾動動畫

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

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

如何隱藏scroll-Y縱向滾動條，并不影響內容滾動的方法

摘要：網上搜了很多關于隱藏滾動條的文章，發現很多都是只說了如何隱藏橫向滾動條對縱向滾動條并沒有明確的述說。本文章將介紹種隱藏滾動條的方法，大家可以結合實際情況，參考文章內容。網上搜了很多關于隱藏滾動條的文章，發現很多都是只說了如何隱藏scroll-X橫向滾動條,對scroll-Y縱向滾動條并沒有明確的述說。本文章將介紹3種隱藏滾動條的方法，大家可以結合實際情況，參考文章內容。純DIV+...

qpwoeiru96 2019-08-01 18:38 評論0 收藏0
如何隱藏scroll-Y縱向滾動條，并不影響內容滾動的方法

摘要：網上搜了很多關于隱藏滾動條的文章，發現很多都是只說了如何隱藏橫向滾動條對縱向滾動條并沒有明確的述說。本文章將介紹種隱藏滾動條的方法，大家可以結合實際情況，參考文章內容。網上搜了很多關于隱藏滾動條的文章，發現很多都是只說了如何隱藏scroll-X橫向滾動條,對scroll-Y縱向滾動條并沒有明確的述說。本文章將介紹3種隱藏滾動條的方法，大家可以結合實際情況，參考文章內容。純DIV+...

JerryWangSAP 2019-08-22 14:55 評論0 收藏0
今天，你的瀏覽器 “滾動” 了嗎？

摘要：今天，你的瀏覽器滾動了嗎序在頁面中，一個有高度或者寬度的容器是最常見的構成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。今天，你的瀏覽器滾動了嗎？序在 Web 頁面中，一個有高度或者寬度的容器是最常見的構成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。而應對溢出，隱藏或者滾動是最常見的處理方式。滾動，作為 FEers 最經常...

leo108 2019-08-21 11:51 評論0 收藏0
今天，你的瀏覽器 “滾動” 了嗎？

摘要：今天，你的瀏覽器滾動了嗎序在頁面中，一個有高度或者寬度的容器是最常見的構成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。今天，你的瀏覽器滾動了嗎？序在 Web 頁面中，一個有高度或者寬度的容器是最常見的構成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。而應對溢出，隱藏或者滾動是最常見的處理方式。滾動，作為 FEers 最經常...

ad6623 2019-08-29 13:09 評論0 收藏0
css隱藏移動端滾動條并且ios上平滑滾動

摘要：完整代碼如下移動端隱藏滾動條解決方案解決上滑動不流暢推薦娃娃日用品美妝護膚娃娃日用品美妝護膚娃娃 HTML代碼如下移動端隱藏滾動條解決方案 * { padding: 0; margin: 0; } .par-type { height: 50px; ...

wangzy2019 2019-08-30 15:55 評論0 收藏0