微信小程序 scroll-view 隱藏橫向滾動條（強迫症的福音）

最近在折騰自己的小程序，其中用到了scroll-view用的比較多了，一般在列表展示頁都要用到這個，在進行滑動的時候邊上都會有一條滾動條，豎向的還無所謂，橫向的就看着很彆扭了。 在開發工具上預覽是沒有問題的，上傳預覽後在手機上顯示就會出現一條黑色長條。效果圖如下

雖然不是很明顯，還是我有強迫症，看着很不爽，所以打算把它去掉。

然後打開官方demo，找了一遍官方文檔，沒有任何說明，這也是官方文檔的一貫作風。並沒有一個屬性是去控制顯示/隱藏滾動條，更別說這樣式。所以文檔是指望不上了。下面的官方文檔內容，不熟悉的小夥伴可以參考着實現。

scroll-view

基礎庫 1.0.0 開始支持，低版本需做兼容處理。

可滾動視圖區域。使用豎向滾動時，需要給scroll-view一個固定高度，通過 WXSS 設置 height。組件屬性的長度單位默認爲px，2.4.0起支持傳入單位(rpx/px)。

屬性	類型	默認值	必填	說明	最低版本
scroll-x	boolean	false	否	允許橫向滾動	1.0.0
scroll-y	boolean	false	否	允許縱向滾動	1.0.0
upper-threshold	number/string	50	否	距頂部/左邊多遠時，觸發 scrolltoupper 事件	1.0.0
lower-threshold	number/string	50	否	距底部/右邊多遠時，觸發 scrolltolower 事件	1.0.0
scroll-top	number/string		否	設置豎向滾動條位置	1.0.0
scroll-left	number/string		否	設置橫向滾動條位置	1.0.0
scroll-into-view	string		否	值應爲某子元素id（id不能以數字開頭）。設置哪個方向可滾動，則在哪個方向滾動到該元素	1.0.0
scroll-with-animation	boolean	false	否	在設置滾動條位置時使用動畫過渡	1.0.0
enable-back-to-top	boolean	false	否	iOS點擊頂部狀態欄、安卓雙擊標題欄時，滾動條返回頂部，只支持豎向	1.0.0
enable-flex	boolean	false	否	啓用 flexbox 佈局。開啓後，當前節點聲明瞭 display: flex 就會成爲 flex container，並作用於其孩子節點。	2.7.3
bindscrolltoupper	eventhandle		否	滾動到頂部/左邊時觸發	1.0.0
bindscrolltolower	eventhandle		否	滾動到底部/右邊時觸發	1.0.0
bindscroll	eventhandle		否	滾動時觸發，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}	1.0.0

Bug & Tip

1. tip: 基礎庫 2.4.0以下不支持嵌套textarea、map、canvas、video 組件
2. tip: scroll-into-view 的優先級高於 scroll-top
3. tip: 在滾動 scroll-view 時會阻止頁面回彈，所以在 scroll-view 中滾動，是無法觸發 onPullDownRefresh
4. tip: 若要使用下拉刷新，請使用頁面的滾動，而不是 scroll-view ，這樣也能通過點擊頂部狀態欄回到頁面頂部

示例代碼

<view class="section">
  <view class="section__title">vertical scroll</view>
  <scroll-view scroll-y style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
    <view id="green" class="scroll-view-item bc_green"></view>
    <view id="red"  class="scroll-view-item bc_red"></view>
    <view id="yellow" class="scroll-view-item bc_yellow"></view>
    <view id="blue" class="scroll-view-item bc_blue"></view>
  </scroll-view>

  <view class="btn-area">
    <button size="mini" bindtap="tap">click me to scroll into view </button>
    <button size="mini" bindtap="tapMove">click me to scroll</button>
  </view>
</view>
<view class="section section_gap">
  <view class="section__title">horizontal scroll</view>
  <scroll-view class="scroll-view_H" scroll-x style="width: 100%">
    <view id="green" class="scroll-view-item_H bc_green"></view>
    <view id="red"  class="scroll-view-item_H bc_red"></view>
    <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
    <view id="blue" class="scroll-view-item_H bc_blue"></view>
  </scroll-view>
</view>

var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
  data: {
    toView: 'red',
    scrollTop: 100
  },
  upper: function(e) {
    console.log(e)
  },
  lower: function(e) {
    console.log(e)
  },
  scroll: function(e) {
    console.log(e)
  },
  tap: function(e) {
    for (var i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },
  tapMove: function(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

然後又去找了下css中的scroll的介紹，內容如下：

該scrollbar組CSS屬性是從Internet Explorer 5.5，這讓設計人員創建了瀏覽器的原生滾動條自定義主題專有的風格掛鉤。目前，它暴露在-webkit供應商前綴後面，用於使用Webkit（和Blink）渲染引擎的瀏覽器。這個年曆條目是一個概述，有關使用自定義滾動條的更完整細分，請閱讀此CSS-Tricks文章。

CSS

body::-webkit-scrollbar {
    width: 1em;
}
 
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

-webkit-scrollbar性質的家族包括7不同僞元素，它們一起包括全滾動條UI元素：

1. ::-webkit-scrollbar解決了酒吧本身的背景。它通常由其他元素覆蓋
2. ::-webkit-scrollbar-button 解決滾動條上的方向按鈕
3. ::-webkit-scrollbar-track 解決進度條“下方”的空白區域
4. ::-webkit-scrollbar-track-piece 是可拖動滾動元素（拇指）未覆蓋的進度條的最頂層
5. ::-webkit-scrollbar-thumb 解決根據可滾動元素的大小調整大小的可拖動滾動元素的問題
6. ::-webkit-scrollbar-corner 解決了可滾動元素的（通常）底角，兩個滾動條可能會遇到
7. ::-webkit-resizer解決了scrollbar-corner一些元素底角上方出現的可拖動調整大小手柄的問題

除了這些僞元素之外，還有11個不需要的僞選擇器類，但爲設計人員提供了對滾動條UI的各種狀態和交互進行樣式化的能力。這些僞選擇器的完整細分和詳細示例可以在CSS-Tricks文章中找到。

• 如果在各種僞元素之前沒有限定選擇器，則樣式將應用於頁面上可能出現的任何滾動條。
• 設置-webkit-scrollbar樣式是強制您的網頁在比Lion更新的Mac OS版本上顯示水平或垂直滾動​​條的好方法，默認情況下通常會隱藏滾動條。
• 由於此屬性位於-webkit供應商前綴後面，因此已將多個jQuery插件寫入“polyfill”或將此功能擴展到其他瀏覽器。一個這樣的插件是jScrollPane。

好了，說了那麼多，上面都是廢話，感興趣的同學， 可以自行去研究，那麼到底怎麼去掉滾動條呢，上代碼：

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

哈哈哈，是不是超級簡單，就三行搞定了。還是上個效果圖吧

然後再上傳，手機端預覽，發現達到了我想要的效果了。哈哈哈哈。。。

聽說，Android 和 iphone 端顯示的還是有區別的，這個我就沒有進行測試了，窮人，買不起蘋果。