小程序自定义滚动条问题记录但之后新增了需求：要在百宝箱上新增曝光埋点，百宝箱里很多元素需要滑动以后才显示到屏幕上进行曝光

参考：

需求：小程序中"百宝箱"组件中，滚动条要求一直显示自定义，并能滚动监听每个元素曝光埋点已知问题：原先利用view容器实现的"百宝箱"，其滚动条可利用overflow-x: auto进行自动显示/隐藏，随后进行滚动条样式的自定义：

.entry_list::-webkit-scrollbar {
  position: absolute;
  height: 6rpx;
}
/* 轨道 */
.entry_list::-webkit-scrollbar-track {
  background-color: #eeeeee;
  margin: 0 345rpx;
}
/* 滑块 */
.entry_list::-webkit-scrollbar-thumb {
  background-color: #25d8a6;
}

实现的效果如图：

但之后新增了需求：要在百宝箱上新增曝光埋点，百宝箱里很多元素需要滑动以后才显示到屏幕上进行曝光，而当前的view容器并没有支持滚动监听。因此换成了微信提供的scroll-view组件，这个组件自带了滚动监听事件。按照scroll-view组件的特性，对页面和样式进行适当改造，如设置内元素为display:inline-block等，scroll-view组件本身添加white-space: nowrap。有了滚动监听，就可以在其回调中比较"百宝箱"里的元素与屏幕右边的距离，当元素进入视窗以后出发曝光埋点。但又存在另外一个问题，scroll-view组件的滚动条样式只有在滚动时显示，不滚动时会隐藏。因此还要处理滚动条样式的问题。有三种解决办法：

在网上查阅到，若想一直隐藏滚动条，可直接设置样式：

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

但有人反馈不好用，没有效果，因此存疑。不过我删除了之前在该样式上的前缀，上面滚动条样式代码变成：

::-webkit-scrollbar {
  position: absolute;
  height: 6rpx;
}
/* 轨道 */
::-webkit-scrollbar-track {
  background-color: #eeeeee;
  margin: 0 345rpx;
}
/* 滑块 */
::-webkit-scrollbar-thumb {
  background-color: #25d8a6;
}

结果真机上成功显示滚动条！上面的样式其实是加在最外层entry_list_container身上，加在scroll-view上无效果，依旧显示默认滚动条。 wxml代码结构如下：

<view class="entry_list_container">
    <scroll-view class="entry_list">
    <view>
      <view></view>
      <view></view>
    </view>
  </scroll-view>
</view>

方法二就是隐藏scroll-view本身的滚动条，自己写一个滚动条放在下面：

<!-- 滚动条 -->
<view class="slide">
  <view class='slide-bar'>
    <view class="slide-action" 
          style="width:{{slideWidth}}rpx; margin-left:{{slideLeft<=1 ? 0 : slideLeft+'rpx'}};">
    </view>
  </view>
</view>

这个方法需要scroll-view里的滚动去监听当前滑动的位置，然后去实时设置滚动条的位置。比较繁琐。

如果不用滚动事件，就可以不用srcoll-view组件了！某同学利用了bind:touchend="clickEnd"，当手指触摸结束时，去判断元素与屏幕宽度的大小，进行曝光埋点。但这种方法只适用于列表元素不多的情况下，如果很多的话，用户一下子滑动到后面，触摸结束时会有一些元素的曝光会被漏掉。