描述

垂直滚动到某个 dom 元素位置，比较常用✴️

1.示例

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

滚动第11个元素 滚动第50个元素 滚动第33个元素 滚动第20个元素，带回调函数

box-1

box-2

box-3

box-4

box-5

box-6

box-7

box-8

box-9

box-10

box-11

box-12

box-13

box-14

box-15

box-16

box-17

box-18

box-19

box-20

box-21

box-22

box-23

box-24

box-25

box-26

box-27

box-28

box-29

box-30

box-31

box-32

box-33

box-34

box-35

box-36

box-37

box-38

box-39

box-40

box-41

box-42

box-43

box-44

box-45

box-46

box-47

box-48

box-49

box-50

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

    <div style="margin-bottom: 12px">
      <el-button type="primary" @click="jumpToElement(11)">滚动第11个元素</el-button>
      <el-button type="primary" @click="jumpToElement(50)">滚动第50个元素</el-button>
      <el-button type="primary" @click="jumpToElement(33)">滚动第33个元素</el-button>
      <el-button type="primary" @click="jumpToElement(20, true)">滚动第20个元素，带回调函数</el-button>
    </div>

    <div
      class="scroll-to-element-demo-scroll-view"
      style="overflow-x: hidden;overflow-y: auto; height: 400px;border: 1px solid chocolate;"
      ref="scrollView"
    >
      <div v-for="item in 50" :key="item">box-{{ item }}</div>
    </div>
  </div>
</template>

<script>
import sfutils from 'sf-utils2'

console.log(sfutils)

export default {
  methods: {
    jumpToElement(toIdx = 0, callBack = false) {
      const scrollDom = this.$refs.scrollView
      const targetDom = scrollDom.querySelector(`div:nth-child(${toIdx}`)
      const callBackFn = callBack
        ? () => {
            alert('滚动成功')
          }
        : () => {}
      sfutils.scrollToElement({ target: targetDom, scrollElement: scrollDom, cb: callBackFn })
    }
  }
}
</script>
<style>

.scroll-to-element-demo-scroll-view {
  overflow-x: hidden;
  overflow-y: auto;
  height: 400px;
  border: 1px solid chocolate;
}
.scroll-to-element-demo-scroll-view > div {
  background: #eee;
  padding: 20px;
  text-align: center;
}
.scroll-to-element-demo-scroll-view > div + div {
  margin-top: 12px;
}

</style>

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

2.入参说明

参数	说明	类型	是否必填	默认值
target	目标元素 或 （传入完整的 css class ｜ css id）	HTMLElement String	是	-
scrollElement	滚动容器元素 或 （传入完整的 css class ｜ css id）	HTMLElement String	-	-
cb	滚动后回调函数	Function	-	-
duration	滚动时长	number	-	400（单位 ms）
offsetTop	偏移量	number	-	0）

3.源码

源码，点开查看 👈

import getParentScrollElement from './getParentScrollElement'
import isString from '@/base/isString'
import getAbsOffsetTop from './getAbsOffsetTop'
import scrollToY from './scrollToY'

/**
 * @description 垂直滚动到某个元素位置
 * @param {string | HTMLElement} target 目标元素
 * @param {{}} scrollElement 滚动元素
 * @param {Function} cb 滚动结束后回掉方法
 * @param {number} duration 滚动时长
 * @param {number} offsetTop 偏移量
 */
function scrollToElement({ target = '', scrollElement = null, cb = () => {}, duration = 400, offsetTop = 0 }) {
  let targetDOM = target
  if (isString(target)) {
    targetDOM = document.querySelector(target)
    if (!targetDOM) {
      console.error(`[warning] 缺少target字段值`)
      return
    }
  }
  if (!scrollElement) {
    scrollElement = getParentScrollElement(targetDOM)
  }
  if (scrollElement?.nodeType !== 1) {
    console.error(`[warning] 传入的scrollElement非元素`)
    return
  }
  if (targetDOM?.nodeType == 1) {
    // 是元素
    const to = getAbsOffsetTop(targetDOM, scrollElement) + offsetTop
    const scrollTop = scrollElement.scrollTop
    scrollToY(scrollElement, scrollTop, to, duration, cb)
  }
}
export default scrollToElement