小程序如何隱藏scroll-view滾動條

小程序中的坑還是蠻多的,最近這幾天每天不是踩坑就是在踩坑的路上😔,這不今天又遇到scroll-view的滾動條無法隱藏的問題

反覆查看了scroll-view的文檔也沒有隱藏滾動條的屬性,也是很無奈呀,那我能怎麼辦呢?自己動手唄

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

熟悉的解決方案,卻不是熟悉的味道呀!

WTF!不支持這麼寫呀,咋整???

不用怕,我肯定不是第一個遇到這個坑的人,讓我們去看看各位優秀的同行們有什麼好辦法?

也沒找到什麼好辦法,最後在微信官方社區的一個帖子看到一個辦法還不錯,帖子地址

 不知道各位看懂沒?沒看懂也沒關係,我用我卓越(拙劣)的畫圖能力爲各位作圖一張以便於大家的理解,上面官方人員提供的方法是針對垂直方向滾動的scroll-view,但是我的實際需求是橫向滾動的,所以下圖也是針對橫向的scroll-view的情況。

scroll-view外層盒子需要比scroll-view高出至少一個滾動條的高度,然後盒子overflow: hidden,這種辦法並沒有去除滾動條只是讓用戶看不到了而已,真是巧妙~

欣喜的嘗試了一下發現還是不行呀!白高興了,剛看到的希望又破滅的感覺。

不過咱們不能放棄呀,堅持是我這個人的優秀特質之一(都是要恰飯的嘛)。這個思路感覺是沒問題的呀,但是爲什麼不行呢?哪裏出了問題,想了想,是不是這個padding?不是需要給滾動條預留空間的嗎?但是這個padding又把預留出來的空間給堵上了。

我們偉大的哪位科學家說過(哪位來着?)沒有實驗就沒有發言權,咱們把padding去掉一試,誒,果然可以了!

代碼就不上了,每個人的業務需求不一樣,只是希望給踩到同樣的坑的朋友們節約點找資料的時間😜

 

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