页面滚动定位Tab处理-一一网

theme: cyanosis
highlight: a11y-dark

这是我参与更文挑战的第 12 天，活动详情查看：更文挑战

Lynne，一个能哭爱笑永远少女心的前端开发工程师。身处互联网浪潮之中，热爱生活与技术。

前言

首先描述下问题，应用场景如下：

随着滚动条的滚动，tab会对应进行切换，切换tab时，又会定位到tab对应内容的高度变化。

切换 tab 定位到对应内容这个可以用简单的锚点定位来实现，但如果需要平滑地进行内容滚动切换最好借助scrollIntoView 来实现，而要实现tab随滚动条的滚动进行切换则需要监听当前页面的滚动。

接下来以一段代码为例，分析实现思路。

<div class="box">
 <div class="tab" ref="tab">
  <div v-for="(item, index) in tabs" :key="index">
    <div :class="{ active: active === index }" @click="switchTab(index)">
      {{ item }}
    </div>
  </div>
 </div>
 <div class="cont" ref="cont">
  <div :class="'cont_'+active">内容{{mapCont[active]}}</div>
 </div>
</div>
复制代码

tab 切换时平滑滚动定位

定义data:

data() {
 return () {
   tabs: [],
   active: 0,
   mapCont: {
     
   }
 }
}
复制代码

定义切换方法：

methods: {
  switchTab(index) {
      const cont_n = mapCont[index + 1];
      this.cont_n.scrollIntoView({
          block: "start",
          behavior: "smooth"
      });
    }
}
复制代码

监听滚动实现tab切换

在mounted中挂载滚动监听：

mounted() {
  const n = this.active;
  const cont_n = this.$refs["cont_"+${n}];
  const tabH = this.$refs["tab"].offsetHeight;
  this.$refs["cont"].addEventListener("scroll", () => {
    if (this.cont_n.getBoundingClientRect().top <= tabH) {
      this.active = n-1;
      return false;
    }
  });
}
复制代码

当tab项已知时，监听并定位到具体tab得切换很简单，举一个实例如下：

// 监听滚动距离
    getScrollTop () {
      let scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
      if (scrollTop && scrollTop > this.topValue + (this.openIndex * 68) + 90) {
        this.isFixedClass = true
      } else {
        this.isFixedClass = false
      }
      if (scrollTop <= this.slotsTopList[1]) {
        this.tabIndex = 0
      } else if (scrollTop <= this.slotsTopList[2]) {
        this.tabIndex = 1
      } else {
        this.tabIndex = 2
      }
    }
复制代码

但tab项数量未知时我们也可以根据以上原理，抽象并完成代码实现。