vue3拖拽排序，拖拽过程中滚轮可以操作滚动条滚动并且距离底部一定距离就让滚动条滚动

<div class="form-list" ref="scrollContainer">
	<VueDraggable
          handle=".handle"
          chosen-class="ghost"
          :scroll-sensitivity="150"
          :scroll-speed="10"
          :scroll="true"
          :bubble-scroll="false"
          :animation="300"
          ref="el"
          v-model="form.list"
          @end="handleDragEnd"
        >
          <template v-for="(element, index) in form.list" :key="element.seqNo">
            <div class="form-item">
              <div class="sort-icon handle">
                <img
                  v-if="dialogType === 'edit' && form.list.length > 1"
                  src="@/assets/image/sort.svg"
                  style="width: 20px"
                />
              </div>
          </template>
    </VueDraggable>
 </div>
 <script>
 import { VueDraggable } from 'vue-draggable-plus';
 const handleDrag = (event: DragEvent) => {
    lastClientY = event.clientY;
    if (!scrollInterval) {
      scrollInterval = setInterval(() => {
        if (!scrollContainer.value) return;
        const { top, bottom } = scrollContainer.value.getBoundingClientRect();
        const threshold = 100;
        if (lastClientY < top + threshold) {
          scrollContainer.value?.scrollTo(
            0,
            scrollContainer.value.scrollTop - 10,
          );
        } else if (lastClientY > bottom - threshold) {
          scrollContainer.value?.scrollTo(
            0,
            scrollContainer.value.scrollTop + 10,
          );
        }
      }, 16);
    }
  };
  const throttle = (func: Function, wait: number) => {
  let timeout: NodeJS.Timeout | null = null;
  return function(this: any, ...args: any[]) {
    const context = this;
    if (!timeout) {
      timeout = setTimeout(() => {
        func.apply(context, args);
        timeout = null;
      }, wait);
    }
  };
}
  const handleWheel = (event: WheelEvent) => {
    event.preventDefault(); // 阻止默认的滚轮事件
    const delta = Math.sign(event.deltaY);
    scrollContainer.value?.scrollTo(
      0,
      scrollContainer.value.scrollTop + delta,
    );
  };
  const handleDragEnd = () => {
    if (scrollInterval) {
      clearInterval(scrollInterval);
      scrollInterval = null;
    }
  };
  onMounted(() => {
    document.addEventListener('drag', handleDrag);
    document.addEventListener('dragend', handleDragEnd);
    const throttledHandleWheel = throttle(handleWheel, 100);
    document.addEventListener('wheel', throttledHandleWheel, { passive: false });
  });

  onBeforeUnmount(() => {
    document.removeEventListener('drag', handleDrag);
    document.removeEventListener('dragend', handleDragEnd);
  });
  </script>