Javascript JS。检测父级溢出的隐藏子级：隐藏

我正在寻找简单的方法来检测父元素的子元素是否在父元素中可见（溢出不会隐藏它）

我发现了这样的东西：

但我想也许有更简单的解决办法

---

提前谢谢

您可以执行以下操作：

• 检查元件的高度和宽度是否大于0px
• 检查元素显示CSS属性是否不是“无”，最好是“块”
• 检查元素定位是否有效，如果有效，检查其“顶部”属性是否不大于父元素的高度
• 左边也是一样——如果它不大于父对象的宽度

---

选中“宽度”时，选中offsetWidth和clientWidth，它们将显示显示给客户端的实际数字。

如果您想要一个普通的js解决方案，请尝试以下方法：

function isVisible (parent, child) {
  return !(
    (child.offsetLeft - parent.offsetLeft > parent.offsetWidth) ||
    (child.offsetTop - parent.offsetTop > parent.offsetHeight)
  )
}

基本上，“如果父元素的起点和子元素的起点之间的差异大于父元素的实际宽度或高度，则认为不可见”

运行以下代码段以获取示例：

var parent=document.getElementById（'parent'）；
[].slice.call（document.querySelectorAll（'.child'））.forEach（function（child，i）{
console.log（i+'isVisible？'，isVisible（parent，child））；
});
函数可见（父、子）{
回来(
（child.offsetLeft-parent.offsetLeft>parent.offsetWidth）||
（child.offsetTop-parent.offsetLeft>parent.offsetlight）
)
}

*{
框大小：边框框；
}
#母公司{
宽度：200px；
高度：100px；
空白：nowrap；
背景：浅蓝色；
}
.孩子{
显示：内联块；
宽度：75px；
身高：100%；
边框：1px纯绿色；
}

0
1.
2.
3.
4.

我有一个类似的要求，但我的要求有点复杂，因为

溢出：hidden

元素不是第一个父元素，而是5或6个元素

只需花一整天的时间尝试使用互联网上的解决方案（我也尝试过你提到的回购协议），但没有任何效果

所以我自己做了这个回购协议（只有JS，2kb大小）

它可能会帮助您，基本上我只是获取目标元素并爬树搜索是否有父元素有溢出：隐藏，一旦找到它，我就会获取父元素的rect大小，并检查目标元素rect是否在父元素内部（视觉上，像素）

要使用它，你只需要

import isVisible from 'is-element-visible';

const el = document.getElementById('id');
isVisible(el);

---

我希望它能帮助你，最好。

简单一点有点含糊不清。你不喜欢你链接到的解决方案的哪些方面？我相信这篇文章会对你有所帮助：这个解决方案对我有效，至少对垂直溢出是有效的！如果父元素包含在一个定位元素中，并且它本身也是一个定位元素，那么这难道不会搞砸吗？由于offsetLeft和offsetTop是相对于最近定位的祖先的，因此子对象的值将相对于父对象的值，而父对象的值将相对于其自己定位的祖先？此外，如果子对象偏移到父对象的左侧，该怎么办？