滚动效果

web/src/views/HandDevice/Home/index.vue

@@ -18,7 +18,7 @@
       />
     </div>
     <div class="markerList">
-      <el-scrollbar height="100%" ref="scrollbarRef">
+      <el-scrollbar height="100%" ref="scrollbarRef" @scroll="onScroll">
         <!--marker列表  -->
         <el-collapse accordion v-model="activeName">
           <el-collapse-item :name="item.id" v-for="item in filterMarkers" :key="item.id">
@@ -227,7 +227,9 @@ async function showTrajectory(item: MarkerData) {
       // sn: '867989072729904'
     })
     if (!data || data.length === 0) {
-      ElMessage.error(`${dayjs(trajectoryTimeRange.value[0]).format('YYYY-MM-DD HH:mm:ss')}至${dayjs(trajectoryTimeRange.value[1]).format('YYYY-MM-DD HH:mm:ss')}时段没有轨迹数据`)
+      ElMessage.error(
+        `${dayjs(trajectoryTimeRange.value[0]).format('YYYY-MM-DD HH:mm:ss')}至${dayjs(trajectoryTimeRange.value[1]).format('YYYY-MM-DD HH:mm:ss')}时段没有轨迹数据`
+      )
       // return
     }
     // 过滤前
@@ -329,9 +331,42 @@ function onClickMarker(item: MarkerData) {
   if (findIndex === -1) {
     return
   }
-  var top = findIndex * 48
+  setTimeout(() => {
+    let top = findIndex * 48
+    // scrollbarRef.value?.setScrollTop(top)
+    // 取消之前的动画
+    cancelAnimationFrame(AnimationId.value as number)
+    scrollTo(scrollbarScrollTop.value, top, scrollbarScrollTop.value)
+  }, 500)
+}
+const scrollbarScrollTop = ref(0)
+function onScroll({ scrollTop }) {
+  scrollbarScrollTop.value = scrollTop
+}
 
-  scrollbarRef.value?.setScrollTop(top)
+// 滚动到指定位置
+const AnimationId = ref<number>()
+function scrollTo(from: number, to: number, current: number) {
+  if (scrollbarScrollTop.value === to) {
+    return
+  }
+  const speed = (to - from) / 30
+
+  if (speed < 0) {
+    if (current <= to) {
+      return
+    }
+  } else if (speed > 0) {
+    if (current >= to) {
+      return
+    }
+  }
+  current = current + speed
+
+  scrollbarRef.value?.setScrollTop(current)
+  AnimationId.value = requestAnimationFrame(() => {
+    scrollTo(from, to, current)
+  })
 }
 onMounted(() => {
   getMarkers()