描述

水平滚动到某个具体位置，支持回调函数/设置滚动时长

1.示例

推荐打开控制查看 dom元素节点

滚动到距离左侧100px 2s内滚动到距离左侧330px 滚动到距离左侧200px，带回调函数

box-1

box-2

box-3

box-4

box-5

<template>
  <div>
    <el-divider content-position="left">推荐打开控制查看 dom元素节点</el-divider>

    <div style="margin-bottom: 12px">
      <el-button type="primary" @click="jumpToX(100)">滚动到距离左侧100px</el-button>
      <el-button type="primary" @click="jumpToX(330, 2000)">2s内滚动到距离左侧330px </el-button>
      <el-button type="primary" @click="jumpToX(200, 500, true)">滚动到距离左侧200px，带回调函数 </el-button>
    </div>

    <div
      style="overflow-x: auto; overflow-y: hidden; font-size: 0;white-space: nowrap;height: 400px; width: 100%;border: 1px solid chocolate;"
      ref="scrollView"
    >
      <div style="display: inline-block;background: #dcbaba; width: 300px; height: 100%">box-1</div>
      <div style="display: inline-block;background: #adad55; width: 300px; height: 100%">box-2</div>
      <div style="display: inline-block;background: #4949ea; width: 300px; height: 100%">box-3</div>
      <div style="display: inline-block;background: #cd2ec8; width: 300px; height: 100%">box-4</div>
      <div style="display: inline-block;background: #6cffb8; width: 300px; height: 100%">box-5</div>
    </div>
  </div>
</template>

<script>
import { scrollToX } from 'sf-utils2'

export default {
  methods: {
    jumpToX(to = 0, duration = 500, callBack = false) {
      const targetDom = this.$refs.scrollView
      const callBackFn = callBack
        ? () => {
            alert('滚动成功')
          }
        : () => {}
      scrollToX(targetDom, targetDom.scrollTop, to, duration, callBackFn)
    }
  }
}
</script>

显示代码 复制代码 复制代码

2.入参说明

参数	说明	类型	是否必填	默认值
el	滚动的 dom 元素	HTMLElement	-	-
start	起始位置 默认是 scrollTop	Number	-	-
to	滑动末端位置	Number	-	-
duration	滚动持续时间	Number	-	500ms
callback	结束回调事件	Function	-	-

3.源码

源码，点开查看 👈

import getScrollLeft from './getScrollLeft'
import isFunction from '@/base/isFunction'
import { _easeInOutQuad, _requestAnimationFrame } from './_constant'

/**
 * 水平滚动
 * @param {HTMLElement} el 滚动的dom
 * @param {number} start 起始位置 默认是 scrollLeft
 * @param {number} to  滑动末端位置
 * @param {number} duration  滚动持续时间
 * @param {Function} callback  结束回调事件
 */
function scrollToX(el, start = 0, to, duration = 500, callback) {
  function elMoveX(el, scrollLeft = 0) {
    if (el) {
      el.scrollLeft = scrollLeft
    } else {
      document.documentElement.scrollLeft = scrollLeft
      document.body.parentNode.scrollLeft = scrollLeft
      document.body.scrollLeft = scrollLeft
    }
  }

  function scrollToXfn(el, start = 0, to, duration = 500, callback) {
    start = getScrollLeft(el) || 0
    const change = to - start
    const increment = 20
    let currentTime = 0
    duration = typeof duration === 'undefined' ? 500 : duration
    let _animateScroll = () => {
      currentTime += increment
      let val = _easeInOutQuad(currentTime, start, change, duration)
      elMoveX(el, val)
      if (currentTime < duration) {
        _requestAnimationFrame(_animateScroll)
      } else {
        if (callback && isFunction(callback)) {
          callback()
        }
      }
    }
    _animateScroll()
  }
  scrollToXfn(el, start, to, duration, callback)
}

export default scrollToX