微信小程序 scroll-view 隐藏横向滚动条（强迫症的福音）

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_31766533/article/details/100097997

最近在折腾自己的小程序，其中用到了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 端显示的还是有区别的，这个我就没有进行测试了，穷人，买不起苹果。