scrollView 微信小程序 scroll-view 去掉滚动条 隐藏滚动条 解决方案 解决方法

微信小程序去掉scroll-view滚动条的方式

在微信小程序的项目开发中，时常有需要用到scroll-view的地方。
但是使用scroll-view就难免的会出现默认的滚动条，很影响页面的样式。

我在做项目的时候就遇到了这样的问题，然后去网上搜索，结果搜索出来很多都是说通过添加下方CSS来达到的。

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

但问题就是这样设置，小程序中的scroll-view依然还存在着滚动条。
之后我也在网上搜索了很多方法，也是没有找到太合适有效的方案。
于是我就想到了下面的这个方法。

因为scroll-view的滚动条是在scroll-view的最右侧(纵向时)，那是不是可以说如果我的scroll-view的宽度超出了终端上的宽度，就可以把scroll-view的滚动条给遮挡在了视线之外。
于是就有了下列Demo

wxml

<scroll-view
	class="scroll-view absolute center"
    scroll-y>
    <view class="list-box">
		<block wx:for="{{list}}" wx:for-item="item">
			<view class="list-item">{{item.num}}</view>
		</block>
	</view>
</scroll-view>

wxss

.absolute {
  position: absolute;
}
.center {
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.scroll-view {
	width: 800rpx;  // 根据所需宽度进行调整。切记一定要比显示宽度大。
	height: 100%;
}
.list-box {
	width: 700rpx;	// 这里的宽度是你所要展示的宽度，按照实际需求来填写。
	height：100%;
	margin: 0 auto;	// 居中显示
}
.list-item {
	width: 100%;
	height: 200rpx;
	border: 1px solid red;
	margin-top: 50px;
	line-height: 200rpx;
	text-align: center;
	font-size: 50rpx;
}
.list-item:last-child {
	margin-bottom: 50px;
}

js

Page({
	data: {
		list: [
			{
				num: 1
			},
			{
				num: 2
			},
			{
				num: 3
			},
			{
				num: 4
			},
			{
				num: 5
			},
		]
	}
})

这样就可以实现微信小程序中的scroll-view的伪隐藏滚动条了。