這篇文章主要介紹了關於原生JS基於window.scrollTo()封裝垂直滾動動畫工具函數，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
原生JS基於window.scrollTo()封裝垂直捲動動畫工具函數，可套用與錨點定位、回到頂部等操作。
封裝原因：
在vue專案中，遇到需要實作垂直捲動效果的需求，初步想到的方法有兩個：
1：使用window.scrollTo()方法，但這個方法是沒有動畫效果的，需要手動封裝一下。
2：使用JQuery的動畫函數，缺點比較明顯：需要引入JQuery。
顯然，選擇第一種好很多。
以下為封裝window.scrollTo()的方法scroll()，檔案名稱為scroll.js
// Created by xiaoqiang on 30/05/2018.
/**
* @param {numeber} currentY 需要移动的dom当前位置离网页顶端的距离
* @param {number} targetY 需要移动的dom当前位置离要移到的位置的距离
*/
function scroll (currentY, targetY) {
// 计算需要移动的距离
let needScrollTop = targetY - currentY
let _currentY = currentY
setTimeout(() => {
// 一次调用滑动帧数，每次调用会不一样
const dist = Math.ceil(needScrollTop / 10)
_currentY += dist
window.scrollTo(_currentY, currentY)
// 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果
if (needScrollTop > 10 || needScrollTop < -10) {
scroll(_currentY, targetY)
} else {
window.scrollTo(_currentY, targetY)
}
}, 1)
}
// 暴露此方法
export default scroll例如在vue中，可以這樣用：
import scroll form '@/common/util/scroll.js'
接著在回應觸發事件的函數中呼叫scroll()，需要傳入兩個參數，例如：
methods: {
test () {
const scrollHeight = document.getElementsByClassName('scroll-element')[0].offsetTop
const currentY = document.documentElement.scrollTop || document.body.scrollTop
scroll(currentY, scrollHeight)
}
}有錯誤或不清晰或可以改進的地方歡迎指出，O(∩_∩)O~~
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
以上是原生JS基於window.scrollTo()封裝垂直捲動動畫工具函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！
