vue+element-ui監(jiān)聽滾動實現(xiàn)錨點定位方式(雙向),錨點問題

更新時間：2024年07月24日 09:12:17 作者：波塞西呀

這篇文章主要介紹了vue+element-ui監(jiān)聽滾動實現(xiàn)錨點定位方式(雙向),錨點問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue+element-ui監(jiān)聽滾動實現(xiàn)錨點定位(雙向),錨點問題

雙向綁定錨點問題是最近項目中遇到的一個問題，網(wǎng)上也有很多方法，不過還是想自己記錄一下。

需求

滾動內(nèi)容為左右布局的右邊內(nèi)容欄內(nèi)，內(nèi)容滾動左邊定位右邊內(nèi)容滾動。

話不多說，直接看代碼

注意：class=“d_jump”

<userInfo class="d_jump" ref="d_jump" :userInfo="userInfolists"></userInfo>
 <el-menu
   :default-active="activeName"
   class="hk-person-item"
   text-color="#333"
   mode="horizontal"
   @select="handleSelect()"
   :style="{top: NavDistance + 'px'}"
   >
   <el-menu-item @click="jump(0)" index="1">
     <span >個人信息</span>
   </el-menu-item>
   <el-menu-item @click="jump(1)" index="2">
     <span>求職意向</span>
   </el-menu-item>
   <el-menu-item @click="jump(2)" index="3">
     <span>求職狀態(tài)</span>
   </el-menu-item>
   <el-menu-item @click="jump(3)" index="4">
     <span>教育經(jīng)歷</span>
   </el-menu-item>
   <el-menu-item @click="jump(4)" index="5">
     <span>工作經(jīng)歷</span>
   </el-menu-item>
   <el-menu-item @click="jump(5)" index="6">
     <span>項目經(jīng)歷</span>
   </el-menu-item>
   <el-menu-item @click="jump(6)" index="7">
     <span>我的證書</span>
   </el-menu-item>
 </el-menu>
 <div class="hk-details-bar" id="state" ref="myMenu">
   <div id="resumes" class="hk-details-title"  >
     <jwIntention class="d_jump" ref="d_jump" :jwList="jwList" ></jwIntention>
     <workState class="d_jump" ref="d_jump" :jobWantState="jobWantState"></workState>
     <education class="d_jump" ref="d_jump" :eduLists="educationList"></education>
     <workFor class="d_jump" ref="d_jump" :workList="workList"></workFor>
     <myProject class="d_jump" ref="d_jump" :projectList="projectList"></myProject>
     <myCert class="d_jump" ref="d_jump" :certList="certList"></myCert>
   </div>

data () {
	return {
		activeName: '1',
        isActive: '1',
        scrolls: {},
        NavDistance: 321,
        navStyle: 0,
        scrollHeight: 0,
	}
}

相關(guān)代碼

mounted: function () {
    this.$nextTick(function () {
      window.addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
      var index = ''
      index = key
      console.log(index)
      // if (index === '2') {
      // this.$router.push({path: '/front/project'})
      // this.activeName = '3'
      // }
    },
    onScroll () {
      let scrolled = document.documentElement.scrollTop || document.body.scrollTop
      if (scrolled >= 1300) {
        this.activeName = '7'
        console.log('7')
      } else if (scrolled < 60 && scrolled >= 0) {
        this.activeName = '1'
        console.log('1')
      } else if (scrolled < 150 && scrolled >= 60) {
        this.activeName = '2'
        console.log('2')
      } else if (scrolled < 200 && scrolled >= 100) {
        this.activeName = '3'
        console.log('3')
      } else if (scrolled < 600 && scrolled >= 500) {
        this.activeName = '4'
        console.log('4')
      } else if (scrolled < 700 && scrolled >= 600) {
        this.activeName = '5'
        console.log('5')
      } else if (scrolled < 800 && scrolled >= 700) {
        this.activeName = '6'
        console.log('6')
      }
    },
    onScrollBehavior (index) {
    },
    // 錨點實驗
    jump (index) {
      console.log(index)
      let active = index.toString()
      this.isActive = active
      // 判斷導航高度
      // myMenu
      let height = this.$refs.myMenu.offsetHeight
      // 用 class="d_jump" 添加錨點
      let jump = window.document.querySelectorAll('.d_jump')
      let total = jump[index].offsetTop
      console.log(total)
      let distance = document.documentElement.scrollTop || document.body.scrollTop
      // 平滑滾動，時長500ms，每10ms一跳，共50跳
      let step = total / 50
      // 判斷小導航距離頂部的位置
      let newDistance = this.NavDistance
      if (index === 0 && newDistance < total) {
        newDistance = 321
      } else if (index > 0 || index <= 6) {
        this.NavDistance = total
      } else {
        this.NavDistance = total - 600
      }

      if (total > distance) {
        smoothDown()
      } else {
        let newTotal = distance - total
        step = newTotal / 50
        smoothUp()
      }
      function smoothDown () {
        if (distance < total) {
          distance += step
          document.body.scrollTop = distance
          document.documentElement.scrollTop = distance
          setTimeout(smoothDown, 10)
        } else {
          document.body.scrollTop = total
          document.documentElement.scrollTop = total
        }
      }
      function smoothUp () {
        if (distance > total) {
          distance -= step
          document.body.scrollTop = distance
          document.documentElement.scrollTop = distance
          setTimeout(smoothUp, 10)
        } else {
          document.body.scrollTop = total
          document.documentElement.scrollTop = total
        }
      }
    }
  },
  watch: {
    activeName: function () {
      console.log(this.activeName)
    }
  }

element步驟條增加錨點的實現(xiàn)

element的步驟條默認樣式是無法點擊的，需求中有點擊步驟條，頁面滾動到特定錨點需求

實現(xiàn)如下：

 <el-card shadow="never" :body-style="{ padding: '5px' }"  id="mySteps">
            <el-steps simple>
              <el-step v-for="(step,index) in laSteps" :title="step.title" :icon="step.icon"
                       :key="index"
                       :href="step.href" rel="external nofollow"  :status="step.status" v-if="step.isShow"></el-step>
            </el-steps>
          </el-card>

1.每個步驟條中 :href=“step.href” 錨點是通過一個href與一個id實現(xiàn)跳轉(zhuǎn)，這里的href僅僅作為一種標識與需要跳轉(zhuǎn)的點id相同即可

   $('.el-step__title').click(function () {
        var goHref = '#' + $(this).parent().parent().attr('href')
        var anchor = that.$el.querySelector(goHref)
        $('#djla').animate({
          scrollTop: anchor.offsetTop
        }, 500);
      });

2.獲取到href的值,根據(jù)這個值決定跳轉(zhuǎn)到什么地方.

3.$(’#djla’)為jq選中整個需滾動區(qū)域