Question

我正在寻找简单方法来检测，如果父级的子元素有溢出：隐藏在父级中是可见的（它不会被溢出隐藏）。

我发现了这样的事情：

http://www.useallfive.com/thoughts/javascript-tool-detect-if-a-dom-element-is-truly-visible/

但我想也许有更简单的解决方案。

提前致谢！

Answer 1

假设你想要一个vanilla js解决方案，试试这个：

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

基本上＆＃34;如果父元素的开头和子元素的开头之间的差异大于父元素的实际宽度或高度，则认为它不可见＆＃34;

运行以下代码段作为示例：

＆＃13;

var parent = document.getElementById('parent');

[].slice.call(document.querySelectorAll('.child')).forEach(function (child, i) {
  console.log(i + ' is visible?', isVisible(parent, child));
});

function isVisible(parent, child) {
  return !(
    (child.offsetLeft - parent.offsetLeft > parent.offsetWidth) ||
    (child.offsetTop - parent.offsetLeft > parent.offsetHeight)
  )
}

＆＃13;

* {
  box-sizing: border-box;
}

#parent {
  width: 200px;
  height: 100px;
  white-space: nowrap;
  background: lightblue;
}

.child {
  display: inline-block;
  width: 75px;
  height: 100%;
  border: 1px solid green;
}

＆＃13;

<div id="parent">
  <div class="child">0</div>
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

＆＃13;

Answer 2

您可以执行以下操作：

检查元素的高度和宽度是否大于0px
检查元素显示CSS属性是否不是“无”，最好是“阻止”
检查元素定位是否有效，如果是，检查它的“top”属性是否不大于父级的高度
左边相同 - 如果它不大于父母的宽度

检查“width”时，检查offsetWidth和clientWidth，这些将显示显示给客户端的实际数字。

Answer 3

我也有类似的要求，但是我的要复杂一点，因为overflow: hidden元素不是第一个父元素，它距离第5或6个元素很远。

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

因此，我自己制作了此存储库（仅JS，大小为2kb）https://github.com/LuizAsFight/is-element-visible。

这可能对您有帮助，基本上我只是获得目标元素，然后爬树搜索是否有任何父级具有overflow:hidden，一旦找到它，我就得到了父级的rect大小，并检查目标元素rect是否为在父级内部（以像素为单位）

要使用它，您只需要

import isVisible from 'is-element-visible';

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

希望对您有帮助，最好。

JS。使用父溢出检测隐藏的子项：隐藏

3 个答案: