這是之前寫在個人博客的文章,現在搬過來)
前言
又很久沒有寫東西了,上週開始將一個APP和一個網站的內容整合到微信小程序中,到這會兒終於搞得快結束了,才發現爲啥我的小程序滾動視圖沒有滾動條,這是鬧哪樣,沒有滾動條的滾動是沒有靈魂的。
原因
原來在app.wxss中定義瞭如下的內容【不知道是不是新建項目自動生成的,這裏也就提供了隱藏滾動條
的思路啦】
::-webkit-scrollbar {
width: 0px;
height: 0px;
color:#transparent;
}
what, 寬高爲0,而且還是透明的,難怪,好吧,修改寬高4px,color設置爲green,以爲可以了,呵呵,太年輕。scroll-viwe
依然沒有滾動條,以爲是佈局原因,導致滾動條消失在界面外,我將寬高設爲20px,想想也是搞笑,設這麼寬,但是,正是這種傻勁,再運行,發現右邊寬出了好多,然而還是沒有滾動條,懂了,肯定還有其他設置,果不其然……
解決
一通搗騰,原來,除了設置::-webkit-scrollbar
,還需要設置::-webkit-scrollbar-track
,這是設置滾動的軌道,::-webkit-scrollbar-thumb
,這是設置滾動條的。所以完整的設置如下(在app.wxss
中,這樣所有的scroll-view都有了,如果需要單獨設置樣式,可在單獨page的wxss中設置)
::-webkit-scrollbar {
width: 4px;
height: 4px;
color:#ffffff;
}
/*定義滾動條軌道 內陰影 圓角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
border-radius: 10px;
background-color:#FFFFFF;
}
/*定義滑塊 內陰影 圓角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color:#39b54a;
}
好了,看看效果
最後
生命不息,使勁造
本文內容個人拙見,若有出入,歡迎指正!
---