vue實現錨點定位功能
本文實例為大傢分享瞭vue實現錨點定位的具體代碼,供大傢參考,具體內容如下
這裡主要是實現瞭一個簡單的滾動觸發錨點高亮,以及點擊錨點觸發滾動的功能
如果是獲取瀏覽器的滾動高度,各個瀏覽器有所差異,使用以下幾種方式:
Chrome: document.body.scrollTop
Firefox: document.documentElement.scrollTop
Safari: window.pageYOffset
我這裡是局部元素滾動,因此稍有差異。先附上html及css代碼塊:
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 distance = document.body.scrollTop || document.documentElement.scrollTop || window.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, element), 10) } else { element.scrollTop = total } } // document.querySelectorAll('.scroll-item').forEach((item, index1) => { // if (index === index1) { // item.scrollIntoView({ // block: 'start', // behavior: 'smooth' // }) // } // }) }
此處附上效果圖:
第一次實現錨點定位及滾動高亮錨點的效果,略有不足,有什麼問題或建議請多多指正。
這裡非常感謝這篇文章帶來的啟發,又get一個新知識點。
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- vue+element ui實現錨點定位
- vue實現錨點跳轉及滾動監聽的方法
- vue模態框實現動態錨點
- vue監聽滾動事件的方法
- JavaScript實現三種常用網頁特效(offset、client、scroll系列)