描述

判断是否元素 el 整体都包含在 container 容器里，返回值 Boolean

1.示例

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

容器

盒子1：【盒子1】是否存在【容器】中：否

盒子2：【盒子2】是否存在【容器】中：否

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

    <div class="isElementInContainer-box">
      容器
      <div class="isElementInContainer-box-1">盒子1：【盒子1】是否存在【容器】中：{{ _isInLabel1 }}</div>
    </div>

    <div class="isElementInContainer-box-2">盒子2：【盒子2】是否存在【容器】中：{{ _isInLabel2 }}</div>
  </div>
</template>

<script>
import sfutils from 'sf-utils2'

export default {
  data() {
    return {
      isIn1: false,
      isIn2: false
    }
  },

  computed: {
    _isInLabel1() {
      return this.isIn1 ? '是' : '否'
    },
    _isInLabel2() {
      return this.isIn2 ? '是' : '否'
    }
  },

  mounted() {
    const containerDom = document.querySelector('.isElementInContainer-box')
    const box1Dom = document.querySelector('.isElementInContainer-box-1')
    const box2Dom = document.querySelector('.isElementInContainer-box-2')
    this.isIn1 = sfutils.isElementInContainer(box1Dom, containerDom)
    this.isIn2 = sfutils.isElementInContainer(box2Dom, containerDom)
  }
}
</script>
<style>

.isElementInContainer-box {
  padding: 20px;
  border: 1px solid cornsilk;
  background-color: coral;
  color: #fff;
}
.isElementInContainer-box-1 {
  padding: 30px;
  background: #adad55;
}
.isElementInContainer-box-2 {
  padding: 30px;
  background: #08f784;
  margin-top: 10px;
}

</style>

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

2.入参说明

参数	说明	类型	是否必填	默认值
el	目标元素	HTMLElement	是	-
container	某个 dom 容器	HTMLElement	是	-

3.源码

源码，点开查看 👈

/**
 * 判断是否元素el位置在 container容器里
 * @param el
 * @param container
 * @returns {boolean}
 */
function isElementInContainer(el, container) {
  if (!el || !container) return false
  const elRect = el.getBoundingClientRect()
  let containerRect
  if ([window, document, document?.documentElement, null, undefined].includes(container)) {
    containerRect = {
      top: 0,
      right: window?.innerWidth,
      bottom: window?.innerHeight,
      left: 0
    }
  } else {
    containerRect = container.getBoundingClientRect()
  }
  return (
    elRect.top < containerRect.bottom &&
    elRect.bottom > containerRect.top &&
    elRect.right > containerRect.left &&
    elRect.left < containerRect.right
  )
}