本篇文章給大家介紹js如何實(shí)現(xiàn)dom元素橫向、縱向滾動(dòng)的動(dòng)畫，希望對(duì)需要的朋友有所幫助！

通過settimeout實(shí)現(xiàn)的滾動(dòng)動(dòng)畫，支持反復(fù)點(diǎn)擊變快

支持水平滾動(dòng)和豎直滾動(dòng)，快速點(diǎn)擊會(huì)將上次未滾動(dòng)完的距離疊加，滾動(dòng)的時(shí)間不變，滾動(dòng)的速度會(huì)變快

使用方式

1、復(fù)制下方代碼；

2、導(dǎo)出對(duì)應(yīng)的方法 movingColumn – 豎直滾動(dòng) moving–水平滾動(dòng)

3、函數(shù)接收3個(gè)參數(shù) dom: 要滑動(dòng)的元素 space: 點(diǎn)擊一次要滾動(dòng)的距離 istop/isLeft 是否向上/左滾動(dòng)

功能修改

const hz = 60 在規(guī)定時(shí)間分幾次滾動(dòng)到目標(biāo)位置 60是人肉眼可識(shí)別的刷新率

每次滾動(dòng)的時(shí)間為 settime里的1ms * hz = 60ms

let timer:any = null // 定時(shí)器 let TargetLocation = -1 // 上一次點(diǎn)擊應(yīng)該滾動(dòng)到的目標(biāo)位置 let toltalSpace = 0 // 本次要滾動(dòng)的距離  /**  * @info 豎直滾動(dòng)  * @info 滾動(dòng)動(dòng)畫 hz 刷新率 可以修改滾動(dòng)的速度  * @params dom：要滾動(dòng)的元素； space 要滾動(dòng)的距離； istop 滾動(dòng)的方向; */ const movingColumn = (dom:HTMLDivElement, space: number, istop:boolean) => {    // 用戶快速點(diǎn)擊 則把上次未滾動(dòng)的距離與本次滾動(dòng)結(jié)合再一起   if (timer && TargetLocation !== -1) {     toltalSpace += TargetLocation - dom.scrollTop     // 計(jì)算本次的目標(biāo)距離     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   }    // 獲取本次的目標(biāo)位置   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 水平滾動(dòng)  * @info 滾動(dòng)動(dòng)畫 hz 刷新率 可以修改滾動(dòng)的速度  * @params dom：要滾動(dòng)的元素； space 要滾動(dòng)的距離； isLeft 滾動(dòng)的方向; */ const moving = (dom:HTMLDivElement, space: number, isLeft:boolean) => {    // 用戶快速點(diǎn)擊 則把上次未滾動(dòng)的距離與本次滾動(dòng)結(jié)合再一起   if (timer && TargetLocation !== -1) {     toltalSpace += TargetLocation - dom.scrollLeft     // 計(jì)算本次的目標(biāo)距離     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   }    // 獲取本次的目標(biāo)位置   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 }