javascript - JS。检测父级溢出的隐藏子级 :hidden

Question

我正在寻找简单方法来检测具有溢出:隐藏的父元素的子元素在父元素中是否可见(它没有被溢出隐藏)。

我发现了这样的东西:

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

但我想知道是否有更简单的解决方案。

提前致谢!

Answer 1

假设你想要一个普通的 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 + ' is visible?', isVisible(parent, child));
});

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

* {
  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;
}

<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>