描述

批量 dom 元素在 父的滚动视图位置，⚠ ️只针对垂直滚动有效️ 返回类型数组，每个对象里面包裹着 classList（class 类）、el（当前 dom 节点）、top（距离父滚动容器顶部大小）
在特定场景中，比如右侧锚点导航，这个方法可以和 scrollToY 方法 结合使用。😊

1.示例

推荐打开控制查看 dom元素节点 打印 batchElsPosInContainer-box 中直接子元素div在父容器所处位置

box-1

box-2

box-3

box-4

box-5

box-6

box-7

box-8

box-9

box-10

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

    <el-button @click="onPrint">打印 batchElsPosInContainer-box 中直接子元素div在父容器所处位置</el-button>

    <div
      class="batchElsPosInContainer-view"
      style="overflow: hidden auto; height: 400px;border: 1px solid chocolate;"
      ref="scrollView"
    >
      <div :class="`batchElsPosInContainer-box-${item}`" v-for="item in total" :key="item">box-{{ item }}</div>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      total: 10
    }
  },
  mounted() {
    this._positions ||= batchElsPosInContainer({
      els: [...new Array(this.total)].map((v, vi) => `.batchElsPosInContainer-box-${vi + 1}`),
      scrollDom: this.$refs.scrollView,
      offsetTop: 0
    })
  },
  methods: {
    onPrint() {
      console.log(this._positions)
    }
  }
}
</script>
<style>

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

</style>

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

打印结果：

2.入参说明

参数	说明	类型	是否必填	默认值
els	目标元素 或 （传入完整的 css class ｜ css id）	Array<NodeList> Array<String>	是	-
scrollDom	滚动容器元素 或 （传入完整的 css class ｜ css id）	HTMLElement	是	-
offsetTop	顶部偏移量	Function	-	-

3.源码

源码，点开查看 👈

import isString from '@/base/isString'
import trim from '@/string/trim'
import getAbsOffsetTop from './getAbsOffsetTop'

/**
 * 元素批量元素在 父的滚动视图位置（只针对 垂直滚动有效）
 * @param {Array<NodeList> | Array<String>} els 元素集合
 * @param {HTMLElement} scrollDom 滚动的容器元素
 * @param {Number} offsetTop 顶部偏移量
 */
function batchElsPosInContainer({ els = [], scrollDom, offsetTop = 0 }) {
  if (!scrollDom) {
    scrollDom = document.documentElement || document.body
    console.error(
      '[warning] [function：batchElsPosInContainer] 中scrollDom 滚动视图没有设定值，默认使用document?.documentElement'
    )
  }
  const _els = els.map(v => {
    if (isString(v)) {
      return scrollDom.querySelector(v)
    }
    return v
  })
  const position = _els.map(el => {
    if (el) {
      return {
        top: getAbsOffsetTop(el, scrollDom, offsetTop),
        classList: trim(el.className)
          .replace(/[\s\uFEFF]+|[\s\uFEFF]/g, '|')
          .split('|'),
        el
      }
    }
    return {}
  })
  const compare = (a, b) => a.top - b.top
  position.sort(compare)
  return position
}

export default batchElsPosInContainer