最近做項(xiàng)目遇到了小程序的滾動(dòng)條，這邊就來聊一聊;

• 打開官方demo，看了一遍官方文檔，沒有任何說明，這是官方的一貫作風(fēng)。沒有一個(gè)屬性是去控制顯示/隱藏滾動(dòng)條。
• 既然是組件，那就是css來控制的。又去看一下css中的scroll的介紹，有大概如下的屬性參考鏈接

1.  :-webkit-scrollbar 滾動(dòng)條整體部分。

2. :-webkit-scrollbar-button 滾動(dòng)條的軌道的兩端按鈕，允許通過點(diǎn)擊微調(diào)小方塊的位置。

3. :-webkit-scrollbar-corner 邊角，即兩個(gè)滾動(dòng)條的交匯處。

4. :-webkit-scrollbar-thumb  滾動(dòng)條里面的小方塊，能向上向下移動(dòng)（或往左往右移動(dòng)，取決于是垂直滾動(dòng)條還是水平滾動(dòng)條）。

5. :-webkit-scrollbar-track  滾動(dòng)條的軌道（里面裝有thumb）。

6. :-webkit-scrollbar-track-piece 內(nèi)層軌道，滾動(dòng)條中間部分（除去）

• 上面是正常css里的用法，用在小程序里該怎么用呢？一樣，在wxss中寫。

  如：隱藏滑動(dòng)條：

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

或者

/*定義滾動(dòng)條高寬及背景 高寬分別對應(yīng)橫豎滾動(dòng)條的尺寸*/
::-webkit-scrollbar{
    width: 6px;
    height: 6px;
    background-color: #ffffff;
}
/*定義滾動(dòng)條軌道 內(nèi)陰影+圓角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: yellow;
}
/*定義滑塊 內(nèi)陰影+圓角*/
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.3);
    background-color: #ff5500;
}