隱藏瀏覽器原生的滾動條

起因:

有這麼一個需求,標題欄內容多,你懂的,移動端顯示有限,所以就使用滑動的方式展現內容咯,不願意使用iscoll等插件,那好吧,就使用我們瀏覽器自帶的滾動咯。

開始咯,設置父元素固定的width,設置overflow-y:hidden,然後子元素flex彈性盒模型佈局,這樣就就一排撐開了,優雅的滾動起來。

遇到問題:

設計師說太醜,一定要把顯示在頁面上的滾動條隱藏掉。確實,這是一個問題,有個滾動條在,隱藏了美觀,那我只能是搜索如何隱藏滾動條,嘗試過各種修改滾動條的樣式,但是都fail告終,測試機型iphone 6s。所以修改滾動條樣式不可行。那就隱藏掉,果不其然,看不到了。代碼如下:

江湖盛傳修改滾動條樣式的代碼(iphone 6s 並無效果,其他機型未測試)

.rich是指定那個元素的滾動條,這是要的,因爲其他位置可能需要顯示滾動條,所以前面記得要帶上範圍的className。

.rich::-webkit-scrollbar {height:8px; width:8px;}
.rich::-webkit-scrollbar-button {height:0; width:0}
.rich::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment { display:block}
.rich::-webkit-scrollbar-button:vertical:start:increment,::-webkit-scrollbar-button:vertical:end:decrement { display:none}
.rich::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal,::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal { border-style:solid; border-color:transparent}
.rich::-webkit-scrollbar-track:vertical::-webkit-scrollbar-track:horizontal{background-clip:padding-box;background-color:#fff;}

.rich::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.05);
border-radius: 10px;
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);}
.rich::-webkit-scrollbar-thumb:hover {background-color:rgba(0,0,0,0.2);border-radius:10px;-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,.1)}
.rich::-webkit-scrollbar-thumb:active {background:rgba(0,0,0,0.6);-webkit-border-radius:15px;}
.rich::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal {  border-width:0;}
.rich::-webkit-scrollbar-track:hover {-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.4);background-color:rgba(0,0,0,0.01);-webkit-border-radius:15px;}
.rich::-webkit-scrollbar-track:active {-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.4);background-color:rgba(0,0,0,0.05);-webkit-border-radius:15px;} 

隱藏滾動條的代碼

.box-price::-webkit-scrollbar { display: none; }

這裏我也是指定了哪個div的滾動條。溫馨提醒,

visibility="visible|hidden  ,按道理說設置visibility:hidden也是可以隱藏元素,但是我試了設置之後還是滾動條存在,所以乖乖使用display:none吧,難道說滾動條只要有佔位置在dom樹裏面就會顯示出來?maybe是這樣,最後的最後我就是設置了這麼一句display:none達到了我想要的效果了。

如果大家有更好的方法告訴我哦,在微信瀏覽器裏頭如何自定義滾動條的樣式。先謝謝你們。

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章