js怎么實(shí)現(xiàn)dom元素橫向及縱向滾動(dòng)的動(dòng)畫

本篇內(nèi)容主要講解“js怎么實(shí)現(xiàn)dom元素橫向及縱向滾動(dòng)的動(dòng)畫”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“js怎么實(shí)現(xiàn)dom元素橫向及縱向滾動(dòng)的動(dòng)畫”吧!

通過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
}

到此，相信大家對(duì)“js怎么實(shí)現(xiàn)dom元素橫向及縱向滾動(dòng)的動(dòng)畫”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！