vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)之scrollIntoView()方法詳解

更新時(shí)間：2022年09月16日 11:18:02 作者：zky的博客

這篇文章主要介紹了vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)之scrollIntoView()方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue錨點(diǎn)跳轉(zhuǎn)scrollIntoView()方法

滾動(dòng)到某個(gè)特定元素

scrollIntoView()；這個(gè)方法不用獲取右邊小標(biāo)題的高度，啥都不用，有id或者class就行啦，幾乎可以滿足你錨點(diǎn)跳轉(zhuǎn)的所有需求，對(duì)齊方式，以及平滑滾動(dòng)了

這里是v-for循環(huán)出來(lái)需要點(diǎn)擊跳轉(zhuǎn)到對(duì)應(yīng)div的事件

<p> v-for="(value,index) in data" @click="scrollToPosition(index)">{{...}}</p> ?

這就是你點(diǎn)擊scrollToPosition事件需要滾動(dòng)對(duì)應(yīng)的div

<div> v-for="(value,index) in data" class="roll">{{...}}</div> ?

js部分

methods:{
? scrollToPosition(index){
? ? ?document.getElementsByClassName('roll')[index].scrollIntoView()
}

這樣就利用scrollIntoView()簡(jiǎn)單實(shí)現(xiàn)了一個(gè)錨點(diǎn)跳轉(zhuǎn),下邊來(lái)看一個(gè)scrollIntoView中的一些屬性

scrollIntoView(true)相等于scrollIntoView();元素的頂端將和其所在滾動(dòng)區(qū)的可視區(qū)域的頂端對(duì)齊

為true時(shí)相應(yīng)的 scrollIntoViewOptions: {block: “start”, inline: “nearest”}。這是這個(gè)參數(shù)的默認(rèn)值。

scrollIntoView(false)元素的底端將和其所在滾動(dòng)區(qū)的可視區(qū)域的底端對(duì)齊

為false時(shí)相應(yīng)的scrollIntoViewOptions: {block: “end”, inline: “nearest”}。

同時(shí)他的參數(shù)也可以是一個(gè)object對(duì)象

? scrollIntoView({
? behavior：auto //定義動(dòng)畫(huà)過(guò)渡效果"auto"或 "smooth" 之一。默認(rèn)為 "auto"。
? block：start//定義垂直方向的對(duì)齊， "start", "center", "end", 或 "nearest"之一。默認(rèn)為 "start"。
? inline:nearest//"start", "center", "end", 或 "nearest"之一。默認(rèn)為 "nearest"。
? })

其中smooth是平滑滾動(dòng) start和end是目標(biāo)滾動(dòng)到的位置

注意：

兼容性的問(wèn)題多數(shù)主流瀏覽器已經(jīng)支持其基本功能，也就是說(shuō)，使用true，false兩個(gè)參數(shù)，來(lái)實(shí)現(xiàn)木訥的定位（沒(méi)有滾動(dòng)動(dòng)畫(huà)）是沒(méi)有任何問(wèn)題的，但是傳入object參數(shù)時(shí)，就不得不說(shuō)一句，IE各種版本會(huì)直接忽略，全部看成true參數(shù)屬性，如果想看到滾動(dòng)動(dòng)畫(huà)，就只有火狐和chrome

一個(gè)簡(jiǎn)單的vue錨點(diǎn)跳轉(zhuǎn)demo

拿去直接粘貼就可

<template>
  <div class="auto-adjust-edit" >
    <!-- 按鈕 -->
    <div class="operation-btn">
        <div class="btn-item" v-for="(item, index) in partList" :key="index" @click="jump(index)"
            :style="{background: activeStep === index ? '#eeeeee' : '#ffffff'}">{{item}}
        </div>
    </div>
    <!-- 滾動(dòng)區(qū)域 -->
    <div class="scroll-content" @scroll="onScroll">
      <div class="scroll-item">
          <div class="part-title">基本信息</div>
      </div>
      <div class="scroll-item">
          <div class="part-title">風(fēng)險(xiǎn)控制</div>
      </div>
      <div class="scroll-item">
          <div class="part-title">成本控制</div>
      </div>
      <div class="scroll-item">
          <div class="part-title">量級(jí)控制</div>
      </div>
      <div class="scroll-item">
          <div class="part-title">新計(jì)劃管理</div>
      </div>
      <div class="scroll-item">
          <div class="part-title">老計(jì)劃管理</div>
      </div>
      <div class="scroll-item">
          <div class="part-title">垃圾計(jì)劃清理</div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
    data() {
        return {
            activeStep: 0,
            partList: ['基本信息', '風(fēng)險(xiǎn)控制', '成本控制', '量級(jí)控制', '新計(jì)劃管理', '老計(jì)劃管理', '垃圾計(jì)劃清理']
        }
    },
    methods: {
        // 滾動(dòng)觸發(fā)按鈕高亮
        onScroll (e) {
            let scrollItems = document.querySelectorAll('.scroll-item')
            for (let i = scrollItems.length - 1; i >= 0; i--) {
                // 判斷滾動(dòng)條滾動(dòng)距離是否大于當(dāng)前滾動(dòng)項(xiàng)可滾動(dòng)距離
                let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop - 100;
                if (judge) {
                    this.activeStep = i
                    break
                }
            }
        },
        // 點(diǎn)擊切換錨點(diǎn)
        jump (index) {
            let target = document.querySelector('.scroll-content')
            let scrollItems = document.querySelectorAll('.scroll-item')
            // 判斷滾動(dòng)條是否滾動(dòng)到底部
            if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
                this.activeStep = index
            }
            let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop // 錨點(diǎn)元素距離其offsetParent(這里是body)頂部的距離(待滾動(dòng)的距離)
            let distance = document.querySelector('.scroll-content').scrollTop // 滾動(dòng)條距離滾動(dòng)區(qū)域頂部的距離
            // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滾動(dòng)條距離滾動(dòng)區(qū)域頂部的距離(滾動(dòng)區(qū)域?yàn)榇翱?
            // 滾動(dòng)動(dòng)畫(huà)實(shí)現(xiàn), 使用setTimeout的遞歸實(shí)現(xiàn)平滑滾動(dòng)，將距離細(xì)分為50小段，10ms滾動(dòng)一次
            // 計(jì)算每一小段的距離
            let step = total / 50
            if (total > distance) {
                smoothDown(document.querySelector('.scroll-content'))
            } else {
                let newTotal = distance - total
                step = newTotal / 50
                smoothUp(document.querySelector('.scroll-content'))
            }
            // 參數(shù)element為滾動(dòng)區(qū)域
            function smoothDown (element) {
                if (distance < total) {
                    distance += step
                    element.scrollTop = distance
                    setTimeout(smoothDown.bind(this, element), 1)
                } else {
                    element.scrollTop = total
                }
            }
            // 參數(shù)element為滾動(dòng)區(qū)域
            function smoothUp (element) {
                if (distance > total) {
                    distance -= step
                    element.scrollTop = distance
                    setTimeout(smoothUp.bind(this, element), 1)
                } else {
                    element.scrollTop = total
                }
            }
            // document.querySelectorAll('.scroll-item').forEach((item, index1) => {
            //   if (index === index1) {
            //     item.scrollIntoView({
            //       block: 'start',
            //       behavior: 'smooth'
            //     })
            //   }
            // })
        }
    }
}
</script>

<style lang="scss" scoped>
  .auto-adjust-edit {
    flex-basis: 100%;
    display: flex;
    overflow: hidden;
    height: 500px;
    height: 100%;
    // 側(cè)邊欄
    .operation-btn {
        width: 9.5%;
        height: 95%;
        margin-right: 0.5%;
        padding-top: 1%;
        margin-top: 4px;
        background: white;
        border: 1px solid rgb(190, 188, 188);
        border-radius: 6px;
        box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
        .btn-item {
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
            cursor: pointer;
        }
    }
    // 表單內(nèi)容
    .scroll-content {
        height: 100%;
        width: 90%;
        overflow: auto;
        .scroll-item {
            background: white;
            border-radius: 8px;
            margin-bottom: 6px;
            border: 1px solid rgb(216, 214, 214);
            min-height: 300px;
            // 標(biāo)題
            .part-title {
                height: 40px;
                line-height: 40px;
                font-weight: 600;
                padding-left: 10px;
            }
            // 表單
            /deep/.el-form {
                border: 1px solid rgb(190, 189, 189);
                width: 98%;
                margin: 10px auto 30px;
                border-radius: 6px;
                /deep/.el-form-item {
                margin-bottom: 12px;
                margin-top: 10px;
                }
            }
        }
    }
  }
</style>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: