放大、缩小不影响页面之前的滚动条定位

src/components/mark/MarkBody.vue

@@ -6,7 +6,7 @@
         :key="index"
         class="single-image-container"
       >
-        <img :src="item.url" />
+        <img :src="item.url" @click="makeMark" />
         <MarkDrawTrack
           :track-list="item.trackList"
           :original-image="item.originalImage"
@@ -41,7 +41,7 @@ interface SliceImage {
 export default defineComponent({
   name: "MarkBody",
   components: { MarkDrawTrack },
-  setup() {
+  setup(props, context) {
     const container = ref(null);
     let sliceImagesWithTrackList: Array<SliceImage> = reactive([]);
     watchEffect(async () => {
@@ -208,10 +208,48 @@ export default defineComponent({
     });
 
     const answerPaperScale = computed(() => {
+      // 放大、缩小不影响页面之前的滚动条定位
+      let percentWidth = 0;
+      let percentTop = 0;
+      if (document.querySelector(".mark-body-container")) {
+        const container = document.querySelector(
+          ".mark-body-container"
+        ) as HTMLDivElement;
+        const scrollLeft = container.scrollLeft;
+        const scrollTop = container.scrollTop;
+        const scrollWidth = container.scrollWidth;
+        const scrollHeight = container.scrollHeight;
+        percentWidth = scrollLeft / scrollWidth;
+        percentTop = scrollTop / scrollHeight;
+      }
+
+      setTimeout(() => {
+        if (document.querySelector(".mark-body-container")) {
+          const container = document.querySelector(
+            ".mark-body-container"
+          ) as HTMLDivElement;
+          const scrollWidth = container.scrollWidth;
+          const scrollHeight = container.scrollHeight;
+          container.scrollTo({
+            left: scrollWidth * percentWidth,
+            top: scrollHeight * percentTop,
+          });
+        }
+      }, 10);
       const scale = store.setting.uiSetting["answer.paper.scale"] || 1;
       return scale * 100 + "%";
     });
-    return { container, store, sliceImagesWithTrackList, answerPaperScale };
+
+    const makeMark = (event: Event) => {
+      console.log(event);
+    };
+    return {
+      container,
+      store,
+      sliceImagesWithTrackList,
+      answerPaperScale,
+      makeMark,
+    };
   },
 });
 </script>