描述

获取目标 dom 在父滚动区域内 距离父滚动区域顶部绝对距离。

1.示例

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

.ex-scroll-view__wrap 容器

box-1

box-2

box-3

box-4

获取box-4距离父滚动容器顶部大小 获取.ex-scroll-view__wrap的父滚动容器距离顶部大小

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

    <div class="ex-scroll-view__wrap" style="background: palegoldenrod">
      <div style="padding: 20px 0">.ex-scroll-view__wrap 容器</div>
      <div class="ex-scroll-view">
        <div class="box-1" style="background: #dcbaba; height: 100px">box-1</div>
        <div class="box-2" style="background: #adad55; height: 100px">box-2</div>
        <div style="background: #4949ea; height: 100px">box-3</div>
        <div class="box-4" style="background: #cd2ec8; height: 100px">box-4</div>
      </div>
    </div>

    <div style="margin-top: 12px">
      <el-button type="primary" @click="getParentScrollTop('.ex-scroll-view .box-4', $event)"
        >获取box-4距离父滚动容器顶部大小</el-button
      >
      <el-button type="primary" @click="getParentScrollTop('.ex-scroll-view__wrap', $event)"
        >获取.ex-scroll-view__wrap的父滚动容器距离顶部大小</el-button
      >
    </div>
  </div>
</template>

<script>
import { getParentScrollElement, getAbsOffsetTop } from 'sf-utils2'

export default {
  methods: {
    getParentScrollTop(cls, event) {
      const targetDom = document.querySelector(cls)
      const scrollDom = getParentScrollElement(targetDom)
      alert(`${event.target.innerText}：${getAbsOffsetTop(targetDom, scrollDom, 0)}px`)
    }
  }
}
</script>

<style>

.ex-scroll-view__wrap {
  padding: 0 20px 20px;
}
.ex-scroll-view {
  overflow-y: auto;
  overflow-x: auto;
  height: 150px;
  border: 1px solid chocolate;
}

</style>

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

说明：

2.入参说明

参数	说明	类型	是否必填	默认值
el	目标 dom 元素	HTMLElement String	-	-
elWrap	目标 dom 元素最近的父滚动容器	DomElement String	-	-
offsetTop	自定义的偏移量	Number	-	-

3.源码

源码，点开查看 👈

/**
 * 获取dom在滚动区域绝对位置top
 * @param el dom节点属性（id、class）或 目标dom元素
 * @param elWrap 滚动dom节点
 * @param offsetTop 偏移量
 * */
function getAbsOffsetTop(el, elWrap, offsetTop = 0) {
  if (!el || !elWrap) return 0
  if (typeof el == 'string') {
    el = document?.querySelector(el)
  }
  if (typeof elWrap == 'string') {
    elWrap = document?.querySelector(elWrap)
  }
  if (!el || !elWrap) return 0
  const elRect = el.getBoundingClientRect()
  const elWrapRect = elWrap.getBoundingClientRect()
  return ~~elRect.top - ~~elWrapRect.top + ~~elWrap.scrollTop - ~~offsetTop
}