vue實現錨點定位功能
阿新 • • 發佈:2021-06-30
本文例項為大家分享了實現錨點定位的具體程式碼,供大家參考,具體內容如下
這裡主要是實現了一個簡單的滾動觸發錨點高亮,以及點選錨點觸發滾動的功能
如果是獲取瀏覽器的滾動高度,各個瀏覽器有所差異,使用以下幾種方式:
Chrome: document.body.scrollTop
Firefox: document.documentElement.scrollTop
Safari: window.pageYOffset
我這裡是區域性元素滾動,因此稍有差異。先附上html及程式碼塊:
scroll-content為滾動區域, operation-btn為控制錨點行為的按鈕。
<template> <div class="anchor-point"> <!-- 滾動區域 --> <div class="scroll-content" @scroll="onScroll"> <div class="scroll-item" style="height: 500px;background: #3a8ee6;">一層</div> <div class="scroll-item" style="height: 500px;background: red;">二層</div> <div class="scroll-item" style="height: 500px;background: #42b983">三層</div> <div class="scroll-item" style="height: 1000px;background: yellow;">四層</div> </div> <!-- 按鈕 --> <div class="operation-btn"> <div v-for="(item,index) in ['一層','二層','三層','四層']" :key="index" @click="jump(index)" :style="{background: activeStep === index ? '#eeeeee' : '#ffffff'}">{{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>
通過監聽滾動事件,高亮顯示錨點按鈕
這裡是通過遍歷滾動項,判斷滾動條滾動距離是否大於當前項的可滾動距離(即距離其offsetParent頂部的距離,這裡是body)
// 滾動觸發按鈕高亮 onScroll (e) { let scrollItems = document.querySelectorAll('.scroll-item') for (let i = scrollItems.length - 1; i >= 0; i--) { // 判斷滾動條滾動距離是否大於當前滾動項可滾動距離 let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop if (judge) { this.activeStep = i break } } },
新增點選事件,根據錨點滾動至對應區域並實現平滑滾動
這裡參考網上的方法,將滾動距離細分為多個小段,並考慮向上及向下的的滾動,實現滾動的過渡動畫。
本來是打算使用scrollIntoView實現滾動動畫,scrollIntoView在各個瀏覽器已經有很好的支援性,但是ScrollIntoViewOptions在瀏覽器的相容性上還有問題,所以改用如下距離分割的方式。
// 點選切換錨點 jump (index) { let target = document.querySelector('.scroll-content') let scrollItems = document.querySelectorAll('.scroll-item') // 判斷滾動條是否滾動到底部 if (target.scrollHeight <= target.scrollTop + target.clientHeight) { this.activeStep = index } let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop // 錨點元素距離其offsetParent(這裡是body)頂部的距離(待滾動的距離) let distance = 客棧document.querySelector('.scroll-content').scrollTop // 滾動條距離滾動區域頂部的距離 // let disNYigqZExvtance = document.body.scrollTop || document.documentElement.scrollTop || wiNYigqZExvndow.pageYOffset // 滾動條距離滾動區域頂部的距離(滾動區域為視窗) // 滾動動畫實現,使用setTimeout的遞迴實現平滑滾動,將距離細分為50小段,10ms滾動一次 // 計算每一小段的距離 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')) } // 引數element為滾動區域 function smoothDown (element) { if (distance < total) { distance += step element.scrollTop = distance setTimeout(smoothDown.bind(this,element),10) } else { element.scrollTop = total } } // 引數element為滾動區域 function smoothUp (element) { if (distance > total) { distance -= step element.scrollTop = distance setTimeout(smoothUp.bind(this,10) } else { element.scrollTop = total } } // document.querySelectorAll('.scroll-item').forEach((item,index1) => { // if (index === index1) { // item.scrollIntoView({ // block: 'start',// behavior: 'smooth' // http://www.cppcns.com }) // } // }) }
此處附上效果圖:
第一次實現錨點定位及滾動高亮錨點的效果,略有不足,有什麼問題或建議請多多指正。
這裡非常感謝這篇文章帶來的啟發,又get一個新知識點。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。