實例講解js如何實現dom元素橫向及縱向滾動的動畫

本篇文章給大家介紹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 }