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

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,13 +275,40 @@ onMounted(() => {
         getList().then(res => {
             initData()
         })
-        // 滚动条
-        window.addEventListener('scroll', handleScroll, true)
     })
-
-
 })
 
+// 滚动事件
+const scrollAction = (event) => {
+    isScrollFlag.value = true;
+    if (!isScrollFlag.value) {
+        rrturn
+    }
+    const _scrollTop = event.target.scrollTop
+    nextTick(() => {
+        let len = navScrollTopArray.value.length;
+        let min = navScrollTopArray.value[1].scrollTop
+        let max = navScrollTopArray.value[len - 2].scrollTop;
+        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) {
+                    activeNameIndex.value = index + 1;
+                    break;
+                }
+            }
+            if (_scrollTop >= max) {
+                activeNameIndex.value = len - 1;
+                break;
+            }
+            if (_scrollTop <= min) {
+                activeNameIndex.value = 0;
+                break;
+            }
+        }
+    })
+}
+
 let navScrollTopArray = ref([])
 // 获取元素距离顶部的位置
 const getNavscrollTop = () => {
@@ -297,36 +322,6 @@ const getNavscrollTop = () => {
     })
 }
 
-// 滚动
-const handleScroll = () => {
-    isScrollFlag.value = true;
-    if(isScrollFlag.value) {
-    let _scrollTop = ctx.refs.bottomRef && ctx.refs.bottomRef.scrollTop;
-        nextTick(() => {
-            let len = navScrollTopArray.value.length;
-            let min = navScrollTopArray.value[1].scrollTop
-            let max = navScrollTopArray.value[len - 2].scrollTop;
-            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) {
-                        activeNameIndex.value = index + 1;
-                        break;
-                    }
-                }
-                if (_scrollTop >= max) {
-                    activeNameIndex.value = len - 1;
-                    break;
-                }
-                if (_scrollTop <= min) {
-                    activeNameIndex.value = 0;
-                    break;
-                }
-            }
-          })
-        }
-}
-
 let isScrollFlag = ref(false)
 // 切换左侧
 const changeTab = (n, data) => {
@@ -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,