vue切换Tab标签滚到相应位置，鼠标滚轮滚动，tab标签自动切换到相应位置

<div class="tablist">

        <a :class="{active : activeBtn === 0}" @click="goAnchor('#anchor-0',0)"><span>*</span> 基础信息</a>

        <a :class="{active : activeBtn === 1}" @click="goAnchor('#anchor-1',1)"><span>*</span> 补助范围</a>

        <a :class="{active : activeBtn === 2}" @click="goAnchor('#anchor-2',2)"><span>*</span> 计算公式</a>

      </div>

      <div id="tabcon" style="display:inline-block;width:760px;">

        <div class="el-dialog-div">

          <el-scrollbar ref="scrollbar" wrap-class="scrollbar-wrapper">

            <el-form

              ref="addForm"

              :model="formInline"

              inline

              :rules="rules"

              :disabled="pageType==='detail'"

            >

              <div id="anchor-0">... </div>

              <div id="anchor-1">... </div>

　　　　<div id="anchor-2">... </div>

 

方法：

// 锚点跳转

    goAnchor(selector, index) {

      this.activeBtn = index

      this.$el.querySelector(selector).scrollIntoView()

    },

    /**

     * 滑轮滚动事件 返回滑轮距顶部的距离  author-1距离顶422  author-2:722

     * */

    handleScroll(e) {

      const scrollbarEl = this.$refs.scrollbar.wrap

      scrollbarEl.onscroll = (e) => {

        if (scrollbarEl.scrollTop < 300) {

          this.activeBtn = 0

        } else if (scrollbarEl.scrollTop > 300 && scrollbarEl.scrollTop < 422) {

          this.activeBtn = 1

        } else if (scrollbarEl.scrollTop > 422) {

          this.activeBtn = 2

        }

      }

    },

 

 

 第二种写法

 

setActive(selector, val) {

      this.$nextTick(() => {

        this.isActive = val

        this.$refs.content.scrollTop = this.$el.querySelector(selector).offsetTop

      })

    },

    orderScroll() {

      this.$nextTick(() => {

        if (this.isApply === true) {

          if ((this.$refs.content.scrollTop + 30) > this.$el.querySelector('#anchor6').offsetTop) {

            this.isActive = 6

          }

        }

        if (this.select11 === true) {

          if ((this.$refs.content.scrollTop + 30) > this.$el.querySelector('#anchor1').offsetTop) {

            this.isActive = 1

          }

        }

        if (this.select12 === true) {

          if ((this.$refs.content.scrollTop + 30) > this.$el.querySelector('#anchor2').offsetTop) {

            this.isActive = 2

          }

        }

        if ((this.$refs.content.scrollTop + 30) > this.$el.querySelector('#anchor0').offsetTop) {

          this.isActive = 0

        }

      })

    }

 

 

 

 

<div class="convenient-box">

        <ul>

          <li

            v-if="isApply"

            :class="{active : isActive === 6}"

            @click="setActive('#anchor6',6)"

          >申请信息</li>

          <li

            v-if="select11"

            :class="{active : isActive === 1}"

            @click="setActive('#anchor1',1)"

          >采购意向书</li>

          <li

            v-if="select12"

            :class="{active : isActive === 2}"

            @click="setActive('#anchor2',2)"

          >招标公告</li>

          <li

            :class="{active : isActive === 0}"

            @click="setActive('#anchor0',0)"

          >基础信息</li>

        </ul>

        <!-- <div class="djmb" /> -->

      </div>

      <div ref="content" class="content-box" @scroll="orderScroll">

        <div v-show="isApply" id="anchor6">

          <div class="item-header-box">

            <svg-icon class="svg-icon-btn" icon-class="dividers" />

            申请信息

            <div class="item-line" />

          </div>

          <div class="item-box">

            <iframe id="iframe-content" class="iframe-content" :src="iframeUrl" />

          </div>

        </div>

        <MainForm

          v-show="select11"

          id="anchor1"

        />

        <MainForm

          v-show="select12"

          id="anchor2"

        />

        <MainForm

          id="anchor0"

          ref="mainForm"      

        />