您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“怎么使用vue實(shí)現(xiàn)錨點(diǎn)定位功能”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“怎么使用vue實(shí)現(xiàn)錨點(diǎn)定位功能”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來(lái)學(xué)習(xí)新知識(shí)吧。
這里主要是實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的滾動(dòng)觸發(fā)錨點(diǎn)高亮,以及點(diǎn)擊錨點(diǎn)觸發(fā)滾動(dòng)的功能
如果是獲取瀏覽器的滾動(dòng)高度,各個(gè)瀏覽器有所差異,使用以下幾種方式:
Chrome: document.body.scrollTop
Firefox: document.documentElement.scrollTop
Safari: window.pageYOffset
我這里是局部元素滾動(dòng),因此稍有差異。先附上html及css代碼塊:
scroll-content為滾動(dòng)區(qū)域, operation-btn為控制錨點(diǎn)行為的按鈕。
<template> <div class="anchor-point"> <!-- 滾動(dòng)區(qū)域 --> <div class="scroll-content" @scroll="onScroll"> <div class="scroll-item" >一層</div> <div class="scroll-item" >二層</div> <div class="scroll-item" >三層</div> <div class="scroll-item" >四層</div> </div> <!-- 按鈕 --> <div class="operation-btn"> <div v-for="(item, index) in ['一層','二層','三層','四層']" :key="index" @click="jump(index)" :>{{item}} </div> </div> </div> </template> <style lang="scss" scoped> .anchor-point { flex-basis: 100%; display: flex; overflow: hidden; .scroll-content { height: 100%; width: 90%; overflow: scroll; } .operation-btn { width: 10%; height: 100%; } } </style>
通過(guò)監(jiān)聽(tīng)滾動(dòng)事件,高亮顯示錨點(diǎn)按鈕
這里是通過(guò)遍歷滾動(dòng)項(xiàng),判斷滾動(dòng)條滾動(dòng)距離是否大于當(dāng)前項(xiàng)的可滾動(dòng)距離(即距離其offsetParent頂部的距離,這里是body)
// 滾動(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 if (judge) { this.activeStep = i break } } },
添加點(diǎn)擊事件,根據(jù)錨點(diǎn)滾動(dòng)至對(duì)應(yīng)區(qū)域并實(shí)現(xiàn)平滑滾動(dòng)
這里參考網(wǎng)上的方法,將滾動(dòng)距離細(xì)分為多個(gè)小段,并考慮向上及向下的的滾動(dòng),實(shí)現(xiàn)滾動(dòng)的過(guò)渡動(dòng)畫(huà)。
本來(lái)是打算使用scrollIntoView實(shí)現(xiàn)滾動(dòng)動(dòng)畫(huà),scrollIntoView在各個(gè)瀏覽器已經(jīng)有很好的支持性,但是ScrollIntoViewOptions在瀏覽器的兼容性上還有問(wèn)題,所以改用如下距離分割的方式。
// 點(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), 10) } 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), 10) } else { element.scrollTop = total } } // document.querySelectorAll('.scroll-item').forEach((item, index1) => { // if (index === index1) { // item.scrollIntoView({ // block: 'start', // behavior: 'smooth' // }) // } // }) }
效果圖:
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫(kù)只關(guān)注視圖層,方便與第三方庫(kù)和項(xiàng)目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。
讀到這里,這篇“怎么使用vue實(shí)現(xiàn)錨點(diǎn)定位功能”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。