微信小程序scroll-view的滚动条设置实现

下面是详细的讲解：

1. scroll-view的基本使用

scroll-view是微信小程序提供的一个可以滚动的视图容器组件，在小程序开发中比较常用，通常用来实现长列表、无限滚动等功能。下面是scroll-view的使用方法：

<scroll-view scroll-y="true" style="height: 300px;">
  // 在这里放置需要滚动的内容
</scroll-view>

在上面的代码中，我们通过scroll-view标签来创建一个可滚动的视图容器，通过scroll-y属性来设置是否纵向滚动。在标签内可以放置需要滚动的内容，此处设置了一个高度为300px的容器。

2. scroll-view的滚动条样式设置

scroll-view提供了一些属性来控制滚动条的样式，下面是一些常用的属性：

2.1. scroll-into-view

scroll-into-view属性可以用来设置scroll-view中某个子元素的id，滚动到指定子元素的位置。例如：

<scroll-view scroll-y="true" style="height: 300px;">
  <view id="top"></view>
  <view id="content"></view>
  <view id="bottom"></view>
</scroll-view>

假设我们想要将scroll-view滚动到id为content的子元素处，可以这样做：

wx.pageScrollTo({
  selector: '#content'
})

其中，wx.pageScrollTo是一个滚动页面的API，通过selector属性来指定滚动到哪个元素，此处指定了'#content'，表示滚动到id为content的子元素处。需要注意的是，当使用wx.pageScrollTo时，scroll-into-view属性会被覆盖，因此我们需要同时设置scroll-into-view和wx.pageScrollTo属性。

2.2. scroll-with-animation

scroll-with-animation属性可以用来设置scroll-view滚动时是否使用动画。例如：

<scroll-view scroll-y="true" style="height: 300px;" scroll-with-animation="true">
  // 在这里放置需要滚动的内容
</scroll-view>

当使用了scroll-with-animation属性后，scroll-view的滚动将会带有动画效果。

2.3. scroll-anchoring

scroll-anchoring属性可以用来设置scroll-view滚动时，页面是否停留在子元素的顶部或底部。例如：

<scroll-view scroll-y="true" style="height: 300px;" scroll-anchoring="false">
  // 在这里放置需要滚动的内容
</scroll-view>

当设置scroll-anchoring为false时，scroll-view滚动时不会停留在子元素的顶部或底部，而是随意停留在中间的位置。

3. 示例说明

下面是两个示例说明，以帮助更好理解scroll-view的滚动条设置：

3.1. 滚动到指定位置并带动画效果

<scroll-view scroll-y="true" style="height:300px;" id="scroll-view">
  <view id="top" style="height: 200px; background-color: #BBDEFB;"></view>
  <view id="content" style="height: 800px; background-color: #FFF59D;"></view>
  <view id="bottom" style="height: 200px; background-color: #B2DFDB;"></view>
</scroll-view>
<button type="primary" bindtap="scrollToContent" style="margin-top: 20px;">滚动到content元素</button>

在上面的代码中，我们创建一个scroll-view容器，包含三个子元素，背景颜色分别为#BBDEFB、#FFF59D和#B2DFDB。接着新增了一个滚动到content元素的按钮，点击后将会滚动到id为content的子元素处，并带有动画效果。

Page({
  scrollToContent() {
    wx.pageScrollTo({
      selector: '#content',
      duration: 500
    })
  }
})

在如上的代码中，我们使用了wx.pageScrollTo API，指定了selector为'#content'，duration为500（表示动画时长为500ms），即可实现滚动到content元素，并带有动画效果。

3.2. 不停留在子元素的顶部或底部

<scroll-view scroll-y="true" style="height:300px;" scroll-anchoring="false">
  <view id="top" style="height: 200px; background-color: #BBDEFB;"></view>
  <view id="content" style="height: 800px; background-color: #FFF59D;"></view>
  <view id="bottom" style="height: 200px; background-color: #B2DFDB;"></view>
</scroll-view>

在上面的代码中，我们创建了一个scroll-view容器，包含三个子元素，背景颜色分别为#BBDEFB、#FFF59D和#B2DFDB。接着设置了scroll-anchoring为false，即可实现滚动时不停留在子元素的顶部或底部，而是可以随意停留在中间的位置。