描述

获取当前 dom 元素在哪个父元素下进行滚动，返回最近的 overflow: auto 的父元素 Dom。
如果当前 Dom 元素正好是滚动视图，返回自己；否则返回最近的上级滚动的视图容器。

1.示例

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

.ex-scroll-view__wrap 容器

box-1

box-2

box-3

box-4

获取box-1的父滚动容器 获取.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 style="background: #adad55; height: 100px">box-2</div>
        <div style="background: #4949ea; height: 100px">box-3</div>
        <div style="background: #cd2ec8; height: 100px">box-4</div>
      </div>
    </div>

    <div style="margin-top: 12px">
      <el-button type="primary" @click="getParentScrollElement('.ex-scroll-view .box-1')"
        >获取box-1的父滚动容器</el-button
      >
      <el-button type="primary" @click="getParentScrollElement('.ex-scroll-view__wrap')"
        >获取.ex-scroll-view__wrap的父滚动容器</el-button
      >
    </div>
  </div>
</template>

<script>
import sfutils from 'sf-utils2'

export default {
  methods: {
    getParentScrollElement(cls) {
      console.log(sfutils.getParentScrollElement(document.querySelector(cls)))
    }
  }
}
</script>

<style>

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

</style>

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

打印结果：

2.入参说明

参数	说明	类型	是否必填	默认值
targetElement	目标 dom 元素	HTMLElement	-	-

3.源码

源码，点开查看 👈

import getStyle from './getStyle'

/**
 * 获取当前元素在哪个父元素滚动视图，如果当前Dom元素正好是滚动视图，返回自己；否则返回最近的上级滚动的视图容器
 * @param {HTMLElement} targetElement 目标元素
 * @returns {{HTMLElement}}
 */
function getParentScrollElement(targetElement = null) {
  const cb = (targetElement = null, scrollView = { el: null }) => {
    if (['BODY', 'HTML'].includes(targetElement?.tagName)) {
      scrollView.el = document?.body
    } else if (
      targetElement &&
      (getStyle(targetElement, 'overflow-y') == 'auto' || getStyle(targetElement, 'overflow-x') == 'auto')
    ) {
      scrollView.el = targetElement
      scrollView.el = targetElement
    } else if (targetElement?.parentElement) {
      cb(targetElement.parentElement, scrollView)
    }
    return scrollView
  }
  const { el } = cb(targetElement)
  return el
}

export default getParentScrollElement