Vue 錨點跳轉雙向綁定監聽滾動

最近碰到一個常見的需求，今天來整理一下思路

點擊錨點 頁面滾動到指定位置，這個很常見

當需要滾動頁面的時候 點擊欄(菜單欄) 同步展示高亮 這個怎么完成呢？

話不多說 貼代碼

1. 這是頭部點擊跳轉部分

<template>
  <div class="privilege-head">
    <ul>
      <li
        :class="{ active: active == index }"
        @click="privilegeHeadClick(item.anchor, index)"
        v-for="(item, index) in privilegeHeadList"
        :key="index"
        class="pointer"
      >
        <img :src="active == index ? item.icon_on : item.icon" alt="" />
        <p class="transition">{{ item.title }}</p>
      </li>
    </ul>
  </div>
</template>

這個anchor 是給每個區域 命名的 id值

    privilegeHeadClick(anchor, index) {
      this.active = index;
      this.$nextTick(() => {
        document.querySelector(`#${anchor}`).scrollIntoView({
          behavior: "smooth", // 平滑過渡
          block: "start" // 上邊框與視窗頂部平齊。默認值
        });
      });
    },

 

2. 這是需要展示的內容區域

關鍵的是這個 @scroll="onScroll" 事件 相當於監聽滾動了

 

 

 3. 計算滾動距離

    onScroll(e) {
      let scrollItems = document.querySelectorAll(".privilege-wrap");
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判斷滾動條滾動距離是否大於當前滾動項可滾動距離
        let judge =
          e.target.scrollTop >=
          scrollItems[i].offsetTop - scrollItems[0].offsetTop;
        if (judge) {
          this.activeStep = i;
          break;
        }
      }
    }

這個 activeStep 就是點擊欄部分需要高亮的下標值 

4. 最后讓 active = activeStep 就可以了

 

 好啦， 到此就完美結束。