隱藏滾動條

2018-03-17539view0

隱藏滾動條的同時還需要支援滾動，我們經常在前端開發中遇到這種情況，最容易想到的是加乙個iscroll外掛程式，但其實現在css也可以實現這個功能，我已經在很多地方使用了，下面一起看看這三種方法。

在本站的側欄，你可以看到前端**的那塊內容並沒有滾動條，但滑鼠移上去卻可以滾動內容。這是什麼技術呢？ 其實我只是把滾動條通過定位把它隱藏了起來。

演示下面給乙個簡化版的**

123

......45
6 .outer-container
12 .inner-container

這個**巧妙的向右移動了17個畫素，剛好等於滾動條的寬度。這個值是我手動除錯得來的。在chrome和ie沒發現問題。

該**最早是在microsoft部落格上看到的，跟我上面的思路差不多，只不過人家裡面又加多了乙個盒子，將內容限制在盒子裡面了。這樣子就看不到滾動條同時也可以滾動。

**如下：

123

4......56
78 .element, .outer-container 
1213 .outer-container 
1819 .inner-container 
2526 .inner-container::-webkit-scrollbar

同時該文章還分享了一種通過css隱藏滾動條的方法，不過這個方法不相容ie，做移動端的可以使用。

那就是自定義滾動條的偽物件選擇器::-webkit-scrollbar，詳情請看之前的文章：css3自定義webkit滾動條樣式

1 &::-webkit-scrollbar

chrome 和safari

.element::-webkit-scrollbar 

ie 10+

.element 

firefox

.element 

隱藏滾動條css3實現滾動同時隱藏滾動條

專案場景需求要在區域性實現滾動，但是滾動出現了滾動條，一瞬間感覺整個頁面都不好了，經過努力css成功實現滾動同時隱藏滾動條，廢話不多說，直接上 隱藏滾動條title ulli ulul webkit scrollbar style head 測試隱藏滾動條li 測試隱藏滾動條li 測試隱藏滾動條li...

CSS 隱藏滾動條

hello無論如何我都想 hello無論如何我都想 hello無論如何我都想要 hello無論如何我都想 hello無論如何我都想要對 hello無論如何我都想 hello無論如何我都想要對你 hello無論如何我都想要對你 hello無論如何我都想 hello無論如何我都想要對你 hello無論如...

CSS隱藏滾動條

移動端瀏覽器將頁面的滾動條自動隱藏，同時又保證頁面可以滾動，使用者可以手動上下翻。pc端瀏覽器不會將頁面的滾動條自動隱藏，在出現橫向滾動條時候有可能會覆蓋內容，直接隱藏橫向滾動條會導致無法橫向滾動。如何做到既隱藏滾動條，又可以橫向滾動？設想是不是可以隱藏了滾動條的大部分，留下一小部分，用來滾動檢視內...