缩略图滚动优化

src/components/QmDialog.vue

@@ -121,7 +121,6 @@ export default defineComponent({
       // @ts-ignore
       const newXRatio = clientX - mousePosition.offsetX;
       const newYRatio = clientY - mousePosition.offsetY;
-      console.log(newXRatio, newYRatio);
       positionStyle.width = parseFloat(positionStyle.width) + newXRatio + "px";
       positionStyle.height =
         parseFloat(positionStyle.height) + newYRatio + "px";

src/features/mark/CommonMarkBody.vue

@@ -107,16 +107,18 @@ const { addTimeout } = useTimers();
 
 // start: 缩略图定位
 watch(
-  () => store.minimapScrollTo,
+  () => [store.minimapScrollToX, store.minimapScrollToY],
   () => {
     const container = document.querySelector(
       ".mark-body-container"
     ) as HTMLDivElement;
     addTimeout(() => {
       if (container) {
-        const { scrollHeight } = container;
+        const { scrollWidth, scrollHeight } = container;
         container.scrollTo({
-          top: scrollHeight * store.minimapScrollTo,
+          top: scrollHeight * store.minimapScrollToY,
+          left: scrollWidth * store.minimapScrollToX,
+          behavior: "smooth",
         });
       }
     }, 10);

src/features/mark/MinimapModal.vue

@@ -31,8 +31,8 @@ const imagesHtml = ref("");
 
 onBeforeUpdate(() => {
   imagesHtml.value =
-    document.querySelector(".mark-body-container")?.innerHTML ??
-    "请关闭或重新打开";
+    document.querySelector(".mark-body-container div:first-of-type")
+      ?.innerHTML ?? "请关闭或重新打开";
   // 没取到图片，提示
   // if (imagesHtml.value.length <= 500) {
   //   imagesHtml.value = "请关闭或重新打开";
@@ -42,7 +42,6 @@ onBeforeUpdate(() => {
 });
 
 const setScrollTo = (e: MouseEvent) => {
-  // console.log(e);
   const target = e.target as HTMLElement;
   const container = target.parentElement?.parentElement as HTMLDivElement;
   const containerPos = container.getBoundingClientRect();
@@ -50,11 +49,15 @@ const setScrollTo = (e: MouseEvent) => {
   const parentPos = parent.getBoundingClientRect();
   // console.log(containerPos, parentPos);
   // 试验出来的... 大概就是2个顶部距离相减，得到相对距离
-  const scrollTo =
+  const scrollToX =
+    (e.offsetX + parentPos.x - containerPos.x) /
+    parseFloat(getComputedStyle(container).width);
+  const scrollToY =
     (e.offsetY + parentPos.y - containerPos.y) /
     parseFloat(getComputedStyle(container).height);
-  if (typeof scrollTo === "number") {
-    store.minimapScrollTo = scrollTo;
+  if (typeof scrollToX === "number" && typeof scrollToY === "number") {
+    store.minimapScrollToX = scrollToX;
+    store.minimapScrollToY = scrollToY;
   }
 };
 const close = () => {

src/types/index.ts

@@ -25,7 +25,8 @@ export interface MarkStore {
   focusTracks: Array<Track>; // 暂时无用
   message: string | null;
   maxModalZIndex: number;
-  minimapScrollTo: number; // 高度的百分比
+  minimapScrollToX: number; // 宽度的百分比
+  minimapScrollToY: number; // 高度的百分比
   allPaperModal: boolean; // 是否显示全卷
   sheetViewModal: boolean; // 是否显示原卷
   globalMask: boolean; // 是否全局遮盖