小程序scroll-view隐藏滚动条

如何小程序页面隐藏滚动条问题 (opens new window)

# 描述

在scroll-view组件中，设计师要求隐藏滚动时的滚动条，文档上有对应的参数，但是不生效。于是开始探索。文件结构如下：

<view class="intro">
  <scroll-view scroll-y enhanced :show-scrollbar="false" class="sub">
    <view style="height:50vh;background:#444"></view>
    <view style="height:50vh;background:#888"></view>
    <view style="height:50vh;background:#ccc"></view>
    <view style="height:50vh;background:#eee"></view>
    <view style="height:50vh;background:#666"></view>
  </scroll-view>
</view>

1
2
3
4
5
6
7
8
9

.intro{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: auto;
}
.sub{
  height: 100%;
}

1
2
3
4
5
6
7
8
9

# 解决

# 解决1

该方案目前在华为nova7是生效的。修改方式如下：

<scroll-view scroll-y class="sub"></scroll-view>

新增下面的样式：

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

1
2
3
4
5

# 解决2

有人说解决1无效，又有人提出另一个方案，子盒子超出父盒子6px即可，刚好盖住滚动条。

只需修改.sub样式，注释::-webkit-scrollbar样式即可：

.sub{
  height: 100%;
  width: calc(100vw + 6px);
  overflow-y: auto;
  overflow-x: hidden;
}

1
2
3
4
5
6

# 总结

官方文档不一定是有效的，一定要真机调试看看。
多角度思考问题，可以从问题本身（方案1）去寻找，也可以分析元素之间的关系做hack（方案2）。

#小程序

上次更新: 2022/03/23, 10:02:52

← 代理域名后webpack热更新失效及解决 npm包相关→