這篇文章為大家介紹js如何實現dom元素橫向、縱向滾動的動畫,希望對需要的朋友有幫助!
#透過settimeout實現的捲動動畫,支援重複點擊變快
支援水平滾動和垂直滾動,快速點擊會將上次未滾動完的距離疊加,滾動的時間不變,滾動的速度會變快
使用方式
1、複製下方程式碼;
2、匯出對應的方法movingColumn
- 垂直捲動 moving
- -水平捲動
3、函數接收3個參數dom: 要滑動的元素 space: 點選一次要捲動的距離 istop/isLeft
是否向上/左捲動
#功能修改
const hz = 60
在規定時間分幾次捲動到目標位置60是人肉眼可辨識的刷新率
#每次捲動的時間為settime
裡的1ms * hz = 60ms
let timer:any = null // 定时器 let TargetLocation = -1 // 上一次点击应该滚动到的目标位置 let toltalSpace = 0 // 本次要滚动的距离 /** * @info 竖直滚动 * @info 滚动动画 hz 刷新率 可以修改滚动的速度 * @params dom:要滚动的元素; space 要滚动的距离; istop 滚动的方向; */ const movingColumn = (dom:HTMLDivElement, space: number, istop:boolean) => { // 用户快速点击 则把上次未滚动的距离与本次滚动结合再一起 if (timer && TargetLocation !== -1) { toltalSpace += TargetLocation - dom.scrollTop // 计算本次的目标距离 if(istop) { TargetLocation = dom.scrollTop + toltalSpace + space } else { TargetLocation = dom.scrollTop + toltalSpace - space } } else if (!timer) { toltalSpace = 0 TargetLocation = -1 } if (istop) { toltalSpace -= space } else { toltalSpace += space } // 获取本次的目标位置 const position = dom.scrollTop TargetLocation = position + toltalSpace clearInterval(timer) timer = null const hz = 60 let i = 1 timer = setInterval(() => { dom.scrollTop = position + i * toltalSpace / hz ++i if (i >= hz) { clearInterval(timer) timer = null dom.scrollTop = TargetLocation // 位置修正 toltalSpace = 0 TargetLocation = -1 } }, 1) } /** * @info 水平滚动 * @info 滚动动画 hz 刷新率 可以修改滚动的速度 * @params dom:要滚动的元素; space 要滚动的距离; isLeft 滚动的方向; */ const moving = (dom:HTMLDivElement, space: number, isLeft:boolean) => { // 用户快速点击 则把上次未滚动的距离与本次滚动结合再一起 if (timer && TargetLocation !== -1) { toltalSpace += TargetLocation - dom.scrollLeft // 计算本次的目标距离 if(isLeft) { TargetLocation = dom.scrollLeft + toltalSpace + space } else { TargetLocation = dom.scrollLeft + toltalSpace - space } } else if (!timer) { toltalSpace = 0 TargetLocation = -1 } if (isLeft) { toltalSpace -= space } else { toltalSpace += space } // 获取本次的目标位置 const position = dom.scrollLeft TargetLocation = position + toltalSpace clearInterval(timer) timer = null const hz = 60 let i = 1 timer = setInterval(() => { dom.scrollLeft = position + i * toltalSpace / hz ++i if (i >= hz) { clearInterval(timer) timer = null dom.scrollLeft = TargetLocation // 位置修正 toltalSpace = 0 TargetLocation = -1 } }, 1) } export { moving, movingColumn }
相關推薦:【JavaScript影片教學】
以上是實例講解js如何實現dom元素橫向及縱向滾動的動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章!