小程序scroll设置（滚动轴样式、真机测试不能滑动）

一、先说scroll真机测试不能滑动的问题

1、我做的项目是公司的一个小程序商城。产品是个妹子，UI+产品+运营，反正啥都会，尤其是提需求。要不是因为她比我重，我早就打她了。我本来已经做好了一个点击购买按钮弹出商品规格选项。本来规格不多，非要改成scroll的mmp，我就开始搞了
2、我用的是微信官方推荐的方式：使用方法具体的可直接到微信小程序开发文档中找到

<view>
	<scroll-view scroll-y="{{true}}">
		// 这行代码catchtouchmove='noMove'，是我做时间选择的时候时间上带的
		<view catchtouchmove='noMove'>
			我是scroll里面可以滚动的的内容
			<picker-view>
				我是时间选择器，也在scroll里面
			<pick-view>
		</view>
	</scroll-view>
</view>

在微信开发者工具上完美运行，没有任何bug！漂亮！完美！开始划水!
然后我就上传到测试服务器了，傻眼了。不能滚动。
打开调试工具开始找bug

是的就是这块，也就是我上面代码块里写的那样。本来这个catchtouchmove=noMove是为了让picker选择时间滚动用的。但是picker现在在scroll里面，而scroll里面有了两个 catchtouchmove，而他只执行了最后一个，导致冲突，第一个无法执行，滑动不成功。其实console里面一直在报了这个错误，我没注意。最后让老大发现了这个错误。当解决这个错误后，突然发现真机模式下也能滚动了。

其实我想说的是,前端真的要多看控制台的每一条记录,说不定就有决方案

bl的源地址：
https://www.bilibili.com/video/BV1Z64y1F7Af/

放一个修改成功之后的小视频：

小程序scroll弹窗滚动条

二、在设置滚动轴的时候，小视频上可以看出，样式做了修改，主要原因还是因为滚动轴不能用,又没有发现什么好用的方法，就开始在滚动轴上下功夫了，然后我就找到了一下解决方案

放一下样式代码：
wxml：

<scroll-view class='picker_scroll'>
	我是scroll里面的内容
</scroll-view>

wxss：

//不加class前缀的话，整个页面所有带scroll的标签的样式都会改变
.picker_scroll ::-webkit-scrollbar 
{
  // scroll上下滚动的宽度
  width: 60rpx;
  // scroll左右滚动的宽度
  height: 60rpx; 
  color: #F06A20;
}
/*定义滚动条轨道 内阴影+圆角*/
 ::-webkit-scrollbar-track
{
// scroll滚动条背景的颜色
-webkit-box-shadow: inset 0 0 20rpx rgba(0,0,0,0.3);
border-radius: 20rpx;
background-color: #ffffff;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 20rpx;
 scroll滚动滑块的颜色
-webkit-box-shadow: inset 0 0 20rpx rgba(240,106,32,0.7);
background-color: rgba(240,106,32,0.8);
}

总结：做事情一定要认真啊，还有就是产品，你能不能不要瞎提要求，改一下很麻烦的，况且没有原型图的情况下