js怎么實現dom元素橫向及縱向滾動的動畫

本篇內容主要講解“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
}

到此，相信大家對“js怎么實現dom元素橫向及縱向滾動的動畫”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！