去除隐藏小程序右侧滚动条的两种方法

这是一篇追求完美的杠精文章

---

在测试小程序布局时会出现，滚动条穿透的现象，如图

👆某团的滚动条已穿透顶部自定义导航栏

自定义导航栏 一定要用 cover-view、 一定要用 cover-view 、一定要用 cover-view

---

或是 在一些不需要滚动条 提示页面长度的情况下显示滚动条 这就很难受

---

所以总结了两个目前确定能用的方法：

1、使用cover-view标签覆盖滚动条

2、使用scroll-view标签绕过滚动条

但各个方法都有各自的局限性

下面进入正题

---

1、用图层覆盖滚动条

cover-view 标签 在模拟器中虽被滚动条穿透 但真机实测中可以覆盖右侧滚动条 

毕竟人家牛逼到能覆盖原生组件之上的

cover-view 官方介绍 https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html

上呆🐎

 

页面 wxml

<!-- 覆盖滚动条 -->
<cover-view class='hsb' />

<!-- 内容 -->
<view class='box'>
  <block wx:for='{{list}}' wx:key='index'>
    <view class='item' style='background:{{item}}' />
  </block>
</view>

页面 wxss

/* 覆盖滚动条 */
.hsb {
  width: 6px;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background: #fff;
}

/* 内容盒子 */
.box {
  padding: 0 10px;
}

/* 内容 */
.item {
  width: 100%;
  height: 80px;
  border-radius: 10px;
  margin: 0 0 10px;
  opacity: 0.4;
}

页面 js

Page({

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    // 获取随机颜色
    function num() {
      let num = new String()
      for (let i = 0; i < 6; i++) {
        num += Math.floor(Math.random() * 10)
      }
      return '#' + num
    }
    // 获取随机颜色数组
    let arr = new Array()
    for (let i = 0; i < 20; i++) {
      arr.push(num())
    }
    // 视图传值
    this.setData({
      list: arr
    })
  }

})

效果

注：模拟器仍会显示滚动条 但真机已没有滚动条显示

优点：在部分爷爷机上 页面滚动相比用scroll-view标签 滚动会顺畅一些 ,不容易发生内容抖动

缺点：右侧6px宽度已经完全遮住，无法显示全宽度，对界面设计风格有要求

---

2、绕过页面滚动条

只要内容高度不超过窗口高度就不会显示页面的滚动条

所以设置scroll-view高度等于窗口高度即可，而scroll-view的滚动条可以通过代码设置隐藏

scroll-view 官方介绍 https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

上呆🐎

 

页面wxml

<scroll-view scroll-y style='height:{{h}}px' >
  <view class='box'>
    <block wx:for='{{list}}' wx:key='index'>
      <view class='item' style='background:{{item}}' />
    </block>
  </view>
</scroll-view>

页面wxss

/* 隐藏滚动条 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.box {
  padding: 0 10px;
}

.item {
  width: 100%;
  height: 80px;
  border-radius: 10px;
  margin: 0 0 10px;
  opacity: 0.4;
}

页面js

const app = getApp()
Page({
  data: {
    h: app.system.windowHeight - 1 //窗口高度 必须-1px 否则某些情况会显示滚动条
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    // 获取随机颜色
    function num() {
      let num = new String()
      for (let i = 0; i < 6; i++) {
        num += Math.floor(Math.random() * 10)
      }
      return '#' + num
    }
    // 获取随机颜色数组
    let arr = new Array()
    for (let i = 0; i < 20; i++) {
      arr.push(num())
    }
    // 视图传值
    this.setData({
      list: arr
    })
  }
})

app.js

App({
  globalData: {

  },
  onLaunch: function() {
    //获取系统信息
    wx.getSystemInfo({
      success: res => {
        this.system = res
      }
    })
  }
})

效果略

注：页面js中 h = app.system.windowHeight - 1 的原因，

        很奇葩的地方是：不减1px 在模拟器上会显示滚动条 真机不显示；减1px后 模拟器上、真机上都不会显示滚动条

        而实测减1px高度对界面没有任何影响，规定统一减1px

优点：界面完全可用

缺点：部分机型视觉上可能会掉帧、抖动

---

这两种方法各有利弊，开发过程中，如某个页面确实需要隐藏滚动条，可根据不同的特点选择最优方案

 

 

另外我在微信小程序社区问了该问题，但官方的社区技术运营专员给我一个链接参考

地址 https://developers.weixin.qq.com/community/develop/doc/000a024b1a41905d509ac7f1055400

用了文中的方法但没有任何效果，大家可以试一试，踩对坑了别忘分享哦～