滚动关联右控左

src/assets/styles/pages.scss

@@ -1291,20 +1291,20 @@
   }
 
   div.section-error {
-    position: relative;
+    // position: relative;
     color: #fe5d4e;
 
-    &::after {
-      content: "";
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: transparent;
-      z-index: 9;
-    }
+    // &::after {
+    //   content: "";
+    //   display: block;
+    //   position: absolute;
+    //   top: 0;
+    //   left: 0;
+    //   right: 0;
+    //   bottom: 0;
+    //   background-color: transparent;
+    //   z-index: 9;
+    // }
   }
 }
 

src/modules/question/components/QuestionImportEdit.vue

@@ -181,6 +181,7 @@ export default {
       paperRichJson: { sections: [] },
       richTextToJSON,
       renderRichText,
+      lastScrollTop: 0,
       // upload answer
       uploadAnswerUrl: `${QUESTION_API}/word/parse/import`,
       uploadAnswerData: {},
@@ -762,27 +763,66 @@ export default {
         this.$refs.QuestionImportPaperEdit.questionContIndexList;
 
       const scrollTop = e.target.scrollTop;
-      // console.log(questionContIndexList, scrollTop);
+      const isScrollDown = scrollTop > this.lastScrollTop;
+      this.lastScrollTop = scrollTop;
       const targeContIndex = questionContIndexList.findIndex(
         (item) => scrollTop < item[3]
       );
-      const targeCont =
-        targeContIndex !== -1
-          ? questionContIndexList[targeContIndex - 1]
-          : questionContIndexList.slice(-1)[0];
+      let targeContPercent = 0;
+      let targeCont = null;
+      let nextTargetCont = null;
+      if (targeContIndex !== -1) {
+        targeCont = questionContIndexList[targeContIndex - 1];
+        nextTargetCont = questionContIndexList[targeContIndex];
+        targeContPercent =
+          (scrollTop - targeCont[3]) / (nextTargetCont[3] - targeCont[3]);
+      } else {
+        targeCont = questionContIndexList.slice(-1)[0];
+        const textHeight = this.$refs.QuestionImportPaperEdit.$el.offsetHeight;
+        targeContPercent =
+          (scrollTop - targeCont[3]) / (textHeight - targeCont[3]);
+      }
 
       const richTextSectionDom = document.getElementById(
         `section-${targeCont[2]}`
       );
-      const elPos = this.$refs.RichTextEditor.$el
-        .querySelector(".v-editor-main")
-        .getBoundingClientRect();
-      const textPos = richTextSectionDom.getBoundingClientRect();
-      let textScrollTop = textPos.y - elPos.y;
-      textScrollTop = Math.max(textScrollTop, 0);
-      this.$refs.RichTextEditor.$el.querySelector(
+      if (!richTextSectionDom) return;
+
+      const richTextContainerDom = this.$refs.RichTextEditor.$el.querySelector(
         ".v-editor-container"
-      ).scrollTop = textScrollTop;
+      );
+      const richTextMainDom =
+        this.$refs.RichTextEditor.$el.querySelector(".v-editor-main");
+      const elPos = richTextMainDom.getBoundingClientRect();
+      const textPos = richTextSectionDom.getBoundingClientRect();
+      const sectionOffsetTop = textPos.y - elPos.y;
+      let nextSectionOffsetTop = richTextMainDom.offsetHeight;
+
+      if (nextTargetCont) {
+        const nextRichTextSectionDom = document.getElementById(
+          `section-${nextTargetCont[2]}`
+        );
+        if (nextRichTextSectionDom) {
+          const nextTextPos = nextRichTextSectionDom.getBoundingClientRect();
+          nextSectionOffsetTop = nextTextPos.y - elPos.y;
+        } else {
+          nextSectionOffsetTop = richTextSectionDom.offsetHeight;
+        }
+      }
+
+      const textScrollTop =
+        sectionOffsetTop +
+        targeContPercent * (nextSectionOffsetTop - sectionOffsetTop);
+      // console.log(
+      //   targeCont[2],
+      //   textScrollTop,
+      //   targeContPercent,
+      //   nextSectionOffsetTop,
+      //   sectionOffsetTop
+      // );
+      richTextContainerDom.scrollTop = isScrollDown
+        ? Math.max(textScrollTop, richTextContainerDom.scrollTop)
+        : Math.min(textScrollTop, richTextContainerDom.scrollTop);
     },
   },
 };