vue标签页置顶，滚动改变标签页样式，点击锚点，获取DOM滚动条

ref传最大标签页组件的滚动条监听：

使用ref：

 <div style="width: 100%;height: calc(100vh - 96px); overflow-y: auto; border-radius: 4px;"
       class="nav"
       ref="detailsHeader">
    <el-row class="menuNav"

监听DOM滚动条：

mounted () {
    const detailsHeader = this.$refs.detailsHeader
    detailsHeader.addEventListener('scroll', this.scrollChange, true)
  },

html部分：

<el-row style="width: 100%; margin:10px auto ; border-radius: 4px;"
            id="menuFlag">
      <div class="listUl"
           :class="whether ? 'isFixed' : 'listUl'">
        <ul style="display: flex;list-style: none;width: 1550;height: 60px;line-height: 60px;margin:auto;padding-left: 122px;">
          <li style="margin-right: 50px;cursor: pointer;font-size: 20px;height:60px;line-height: 60px;text-align: center;padding: 0px 20px;"
              v-for="(item,index) in title_list"
              :key="index"
              ref="spans"
              :class="activeStep === index ?'liList':''"
              @click="jump(index)">
            {{item.title}}
          </li>
        </ul>
      </div>
      <div class="result scroll-content">
        <!-- 标的基本信息 -->
        <subjectInformation class="scroll-item"
                            id="subjectInformation"
                            :details="details"></subjectInformation>
        <!-- 交易条件与受让方资格条件 -->
        <transaction class="scroll-item"
                     id="transaction"
                     :details="details"></transaction>
        <!-- 项目图片 -->
        <projectPicture class="scroll-item"
                        id="projectPicture"
                        :details="details"></projectPicture>
        <!-- 项目附件 -->
        <attachments class="scroll-item"
                     id="attachments"
                     :details="details"></attachments>
        <!-- 标的物位置 -->
        <targetPosition class="scroll-item"
                        id="targetPosition"
                        :details="details"></targetPosition>
        <!-- 出租方信息 -->
        <rentalInformation class="scroll-item"
                           id="rentalInformation"
                           :details="details"></rentalInformation>
      </div>

    </el-row>

data部分：

whether: false,
      activeStep: 0,
      title_list: [
        { title: '标的基本信息', id: "#subjectInformation" },
        { title: '交易条件与受让方资格条件', id: "#transaction" },
        { title: '项目图片', id: "#projectPicture" },
        { title: '项目附件', id: "#attachments" },
        { title: '标的物位置', id: "#targetPosition" },
        { title: '出租方信息', id: "#rentalInformation" },
      ],

方法：

// 点击切换锚点
    jump (index) {
      let that = this
      this.activeStep = index
      // 用 class="step-jump" 添加锚点
      let jump = document.querySelectorAll('.scroll-item')
      let total = jump[index].offsetTop
      // this.$refs.detailsHeader.scrollTop
      console.log('纵坐标', total)
      //        this.$emit('viewScroll', total)
      // let distance = this.$refs.detailsHeader.offsetTop
      if (this.whether == false) {
        this.$refs.detailsHeader.scrollTop = total + 534
      } else {
        this.$refs.detailsHeader.scrollTop = total + 600
      }
    },
    scrollChange (e) {
      console.log(e)
      let scrollItems = document.querySelectorAll(".scroll-item");
      let offsetTop = document.querySelector('.menuNav').offsetTop;
      let offsteWidth = document.querySelector('.menuNav').scrollWidth
      console.log(document.querySelector(".listUl").scrollWidth)
      let mun = offsetTop + 554
      this.whether = e.target.scrollTop > mun;
      console.log(e.target.scrollTop)
      if (e.target.scrollTop > mun) {
        this.whether = true
        document.querySelector('.listUl').style.width = offsteWidth + "px"
      } else {
        this.whether = false
      }
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop + 584;
        if (judge) {
          if (e.target.scrollTop + e.target.offsetHeight === e.target.scrollHeight) {
            this.activeStep = scrollItems.length - 1
          } else {
            this.activeStep = i;
          }
          break;
        }
      }
    },

样式：

.isFixed {
  position: fixed;
  top: 106px;
  font-size: 20px;
  margin: auto;
  background-color: #fff;
  border-radius: 4px;
  z-index: 1000;
}
.liList {
  color: #409eff;
  border-bottom: 4px solid #409eff;
}
.listUl {
  width: 100%;
  margin: 0 auto 10px;
  background-color: #ffffff;
  border-radius: 4px;
  font-size: 20px;
}