微信小程序scroll-view显示滚动条

试过网上的直接修改样式的方法不行，自己写一个滚动条定位上去

 <scroll-view class="expired-battery" scroll-y @scrolltolower="scrolltolower" @scroll="scroll">
    <div class="scroll-bar"
      :style="'height:' + scrollBarHeight + 'px; top:' + scrollBarTop + 'px; display:' + (flagShow ? 'block' : 'none')">
    </div>
    <expired-card ></expired-card>
  </scroll-view>
    data() {
    return {
      expiredBatteryList: [{},{},{}],
      scrollBarHeight: 50,
      scrollBarTop: 10,
      contentHeight: 512,
      flagShow: true
    };
  },
   mounted() {
    // 获取商户库存统计
    this.getOverBattery()
  },
   getOverBattery() {
          this.flagShow = this.expiredBatteryList.length > 2 ? true :false 
    },
scroll(event) {
      const { scrollTop, scrollHeight } = event.detail;
      const ratio = 256 / scrollHeight; // 计算内容可视区域与内容高度的比例
      this.scrollBarHeight = 256 * ratio; // 计算滚动条的高度
      this.scrollBarTop = scrollTop; // 计算滚动条的位置
    },

<style scoped lang="scss">
.expired-battery {
  max-height: 512rpx;

  .scroll-bar {
    position: absolute;
    top: 0;
    height: 50px;
    right: 10rpx;
    z-index: 9999;
    border-radius: 3px 3px 3px 3px;
    /* 定义在滚动条父容器的右侧 */
    width: 10rpx;
    background-color: #D9D9D9;
  }
}
</style>