uniapp中如何实现模拟滚动功能

<template><view class="container" :style="'height:' + containerHeight + 'px'"><scroll-view class="content" :style="'height:' + contentHeight + 'px'" scroll-y><view class="item" v-for="item in items" :key="item.id">{{ item.text }}</view></scroll-view><view class="scrollbar" :style="{height: scrollbarHeight + 'px', transform: 'translateY(' + scrollbarTop + 'px)'}"></view></view></template><script>export default {  data() {    return {      containerHeight: 400,      contentHeight: 800,      scrollbarHeight: 100,      scrollbarTop: 0,      items: [        { id: 1, text: 'Item 1' },        { id: 2, text: 'Item 2' },        { id: 3, text: 'Item 3' },        // ...      ]    }  },  methods: {    onScroll(event) {      const { scrollTop } = event.detail      const contentHeight = this.contentHeight      const containerHeight = this.containerHeight      const scrollbarHeight = this.scrollbarHeight      // 计算滚动条高度和位置      const maxScrollTop = contentHeight - containerHeight      const maxScrollbarTop = containerHeight - scrollbarHeight      const scrollbarTop = scrollTop * maxScrollbarTop / maxScrollTop      // 更新滚动条高度和位置      this.scrollbarTop = scrollbarTop    }  }}</script><style>.container {  position: relative;  overflow: hidden;}.content {  overflow: hidden;}.item {  height: 100px;  line-height: 100px;  text-align: center;  border-bottom:1px solid #ccc;}.scrollbar {  position: absolute;  right: 0;  width: 6px;  background-color: rgba(0, 0, 0, 0.5);}</style>