微信小程序設置滾動條過程詳解
更新時間：2019年07月25日 17:16:17 作者：Numen.fan
這篇文章主要介紹了微信小程序設置滾動條過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
原因
原來在app.wxss中定義了如下的內容【不知道是不是新建項目自動生成的，這里也就提供了隱藏滾動條的思路啦】
::-webkit-scrollbar {
width: 0px;
height: 0px;
color:#transparent;
}
what, 寬高為0，而且還是透明的，難怪，好吧，修改寬高4px，color設置為green，以為可以了，呵呵，太年輕。
scroll-viwe依然沒有滾動條，以為是布局原因，導致滾動條消失在界面外，我將寬高設為20px，想想也是搞笑，設這么寬，但是，正是這種傻勁，再運行，發(fā)現(xiàn)右邊寬出了好多，然而還是沒有滾動條，懂了，肯定還有其他設置，果不其然……
解決
一通搗騰，原來，除了設置::-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;
}
好了，看看效果
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文通過實例代碼給大家介紹了bootstrap 路徑導航 分頁 進度條的相關知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08
這篇文章主要為大家詳細介紹了原生Javascript和jQuery做輪播圖簡單例子,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
HTML中事件觸發(fā)列表與解說...2007-07-07
先用concat拼接數組 ，再使用一個對象、一個新數組（用于存放不重復的數組）具體實現(xiàn)如下，感興趣的朋友可以參考2013-12-12
本教程旨在實現(xiàn)lightBox時的樣式與行為分離，減少JS在各方面（全屏遮蔽、ie6中遮蔽select、雙向居中、高度自適應內容等）的工作。2009-07-07
本文通過實例給大家詳解介紹了Bootstrap筆記之縮略圖、警告框知識，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
最近做到iframe的高度自適應這個問題;發(fā)現(xiàn)自己做的網頁是通過file方式訪問的，將網頁代碼放到apache下通過http協(xié)議訪問，在iframe加載的時候調用如下js方法:果然網頁高度能夠自適應（對于其他方案應該也有效果，我沒有注意去嘗試）感興趣的朋友可以了解下2013-01-01
最近在學習JavaScript，因此想到使用js實現(xiàn)表單校驗。下面通過本文給大家分享使用javascript實現(xiàn)表單校驗功能的步驟，需要的的朋友參考下吧2017-08-08
淺析showModalDialog數據緩存問題(用禁止瀏覽器緩存解決)
在使用showModalDialog彈出窗口時，顯示的數據是上次修改前的數據，這是因為默認情況下頁面保存了緩存，所以顯示的數據并不是修改后的情況2013-07-07
本文將用html，css和JavaScript實現(xiàn)一個簡單的便簽系統(tǒng)。除非手動清空便簽，否則便簽會一直保留，非常方便。感興趣的小伙伴可以跟隨小編一起動手試一試2022-02-02