算法对比：左册导航跟右侧滚动联动

front/src/views/home/algorithmCompare.vue

@@ -31,7 +31,7 @@
                             </span>
                         </div>
                     </div>
-                    <div class="bottom" ref="bottomRef">
+                    <div class="bottom bottomRef" ref="bottomRef" @scroll="(event) => scrollAction(event)">
                         <div class="bottom-item" v-for="(data, i) in tableData" :key="i">
                             <div class="title" :title="data.title" :ref="data.title">{{ data.title }}</div>
                             <!-- 算法优势 -->
@@ -101,12 +101,10 @@ import { pageWithAttrs } from '@/api/abilityStatistics'
 import { defineComponent, ref, onMounted, getCurrentInstance, computed, unref, reactive, nextTick } from 'vue';
 import { selectOne } from '@/api/home'
 import { message, Tooltip, Table, Spin } from 'ant-design-vue'
-import { useRouter } from 'vue-router'
+import { useRouter } from 'vue-router';
 
 const router = useRouter()
 let queryId = router.currentRoute.value.query.id;
-
-console.log('111---->', router)
 const ctx = getCurrentInstance();
 
 // 最大4列
@@ -277,31 +275,16 @@ onMounted(() => {
         getList().then(res => {
             initData()
         })
-        // 滚动条
-        window.addEventListener('scroll', handleScroll, true)
     })
-
-
 })
 
-let navScrollTopArray = ref([])
+// 滚动事件
-// 获取元素距离顶部的位置
+const scrollAction = (event) => {
-const getNavscrollTop = () => {
-    navScrollTopArray = ref([])
-    leftNav.value.map((title, index) => {
-        let realTop = ctx.refs[title][0].offsetTop;
-        navScrollTopArray.value.push({
-            scrollTop: realTop - 240,
-            index: index
-        })
-    })
-}
-
-// 滚动
-const handleScroll = () => {
     isScrollFlag.value = true;
-    if(isScrollFlag.value) {
+    if (!isScrollFlag.value) {
-    let _scrollTop = ctx.refs.bottomRef && ctx.refs.bottomRef.scrollTop;
+        rrturn
+    }
+    const _scrollTop = event.target.scrollTop
     nextTick(() => {
         let len = navScrollTopArray.value.length;
         let min = navScrollTopArray.value[1].scrollTop
@@ -309,7 +292,7 @@ const handleScroll = () => {
         for (let index = 0; index < navScrollTopArray.value.length; index++) {
             const item = navScrollTopArray.value[index];
             if (index < len - 1) {
-                    if (_scrollTop > item.scrollTop && _scrollTop < navScrollTopArray.value[index + 1].scrollTop) {
+                if (_scrollTop > item.scrollTop && _scrollTop <= navScrollTopArray.value[index + 1].scrollTop) {
                     activeNameIndex.value = index + 1;
                     break;
                 }
@@ -324,7 +307,19 @@ const handleScroll = () => {
             }
         }
     })
-        }
+}
+
+let navScrollTopArray = ref([])
+// 获取元素距离顶部的位置
+const getNavscrollTop = () => {
+    navScrollTopArray = ref([])
+    leftNav.value.map((title, index) => {
+        let realTop = ctx.refs[title][0].offsetTop;
+        navScrollTopArray.value.push({
+            scrollTop: realTop - 240,
+            index: index
+        })
+    })
 }
 
 let isScrollFlag = ref(false)
@@ -334,7 +329,6 @@ const changeTab = (n, data) => {
     activeNameIndex.value = n;
     // 获取元素距离父元素的距离
     let realTop = ctx.refs[data][0].offsetTop;
-    console.log('realTop------------>', realTop);
     if (realTop || realTop === 0) {
         ctx.refs.bottomRef.scrollTo({
             'top': realTop - 240,