Javascript 如何测试一个元素是否在；旋转木马“；（溢出的容器：隐藏“有多个大的子容器”）是否可见？

我正在寻找一个通用（本机）Javascript函数，它可以判断元素是否可见，可以考虑“旋转木马”（也称为“滑块”）中的元素
这些通常是带有“幻灯片”的容器，每个幻灯片都是位于前一个幻灯片左侧（或右侧）的元素，但实际上只有一个幻灯片可见
可以在此网页中看到一个示例：

编辑：带3张幻灯片的旋转木马示例：

<div class="carousel">
    <div class="slide" style="left:0"><img src="..." /></div>
    <div class="slide" style="left:640px"><img src="..." /></div>
    <div class="slide" style="left:1280px"><img src="..." /></div>
</div>

<style>
   .carousel  {
      width: 640px;
      height: 460px;
      overflow: hidden;
   }
   .slide {
      position: absolute;
      width: 100%;
      height: 100%;
   }

</style>

旋转木马{
宽度：640px；
高度：460px；
溢出：隐藏；
}
.幻灯片{
位置：绝对位置；
宽度：100%；
身高：100%；
}

对于旋转木马中不直接可见的图像，函数应返回

false

---

我尝试了许多在SO中回答有关可见性检测问题时建议的技巧，其中包括检查

offsetParent

，

offsetLeft

，

offsetlight

，以及使用

getComputedStyle

和检查

显示

，等等，但是，对于旋转木马中的不可见图像，它们都返回

true

。

回答我自己的问题

// This function will return true if an element inside a "carousel" is visually invisible.
function isOffsetHidden(elem) {
  if (elem.nodeName == "BODY") return false;
  // find out if any parent of the element has 'overflow:hidden':
  var p = elem, isOverflow = false;
  while ((p=p.parentNode) && p.nodeName!=="BODY") {
    if (window.getComputedStyle(p)['overflow']=="hidden") {
      isOverflow = true;
      break;
    }
  }
  if (isOverflow) {
    var er = elem.getBoundingClientRect(),
        pr = p.getBoundingClientRect();

    return (er.right < pr.left || er.bottom < pr.top || er.left < pr.right || er.top < pr.bottom);

  }
  return false;
}

//如果“旋转木马”中的元素在视觉上不可见，则此函数将返回true。
功能IsofSethidden（elem）{
if（elem.nodeName==“BODY”）返回false；
//找出元素的任何父元素是否具有“溢出：隐藏”：
var p=elem，isOverflow=false；
while（（p=p.parentNode）&p.nodeName！=“BODY”）{
if（window.getComputedStyle（p）[“溢出”]=“隐藏”）{
isOverflow=真；
打破
}
}
if（等溢流）{
var er=elem.getBoundingClientRect（），
pr=p.getBoundingClientRect（）；
返回（er.right

它的工作原理是首先尝试查找具有

溢出：隐藏

的容器，然后如果元素位于具有

溢出：隐藏

且“超出容器边界”的容器内，则函数返回

true

在

while

循环中，当元素为

body

时，我们需要停止，否则它将继续运行，直到

文档

，并将抛出一个错误，指出

窗口.getComputedStyle的参数“未实现元素接口”

我还将重新编辑问题的标题，使之更具体。
回答我自己的问题

// This function will return true if an element inside a "carousel" is visually invisible.
function isOffsetHidden(elem) {
  if (elem.nodeName == "BODY") return false;
  // find out if any parent of the element has 'overflow:hidden':
  var p = elem, isOverflow = false;
  while ((p=p.parentNode) && p.nodeName!=="BODY") {
    if (window.getComputedStyle(p)['overflow']=="hidden") {
      isOverflow = true;
      break;
    }
  }
  if (isOverflow) {
    var er = elem.getBoundingClientRect(),
        pr = p.getBoundingClientRect();

    return (er.right < pr.left || er.bottom < pr.top || er.left < pr.right || er.top < pr.bottom);

  }
  return false;
}

//如果“旋转木马”中的元素在视觉上不可见，则此函数将返回true。
功能IsofSethidden（elem）{
if（elem.nodeName==“BODY”）返回false；
//找出元素的任何父元素是否具有“溢出：隐藏”：
var p=elem，isOverflow=false；
while（（p=p.parentNode）&p.nodeName！=“BODY”）{
if（window.getComputedStyle（p）[“溢出”]=“隐藏”）{
isOverflow=真；
打破
}
}
if（等溢流）{
var er=elem.getBoundingClientRect（），
pr=p.getBoundingClientRect（）；
返回（er.right

它的工作原理是首先尝试查找具有
溢出：隐藏
的容器，然后如果元素位于具有
溢出：隐藏
且“超出容器边界”的容器内，则函数返回
true

在
while
循环中，当元素为
body
时，我们需要停止，否则它将继续运行，直到
文档
，并将抛出一个错误，指出
窗口.getComputedStyle的参数“未实现元素接口”

我还将重新编辑问题的标题，使之更具体。
包括您尝试过的代码，并通过幻灯片帮助我们帮助您定义在此上下文中可见的内容。元素是否显示为
none
，它们是否隐藏在其他元素后面或屏幕外等。只有当您知道“不可见”是什么时，您才能理解这一点。您看到了吗？包括您尝试过的代码，并通过幻灯片帮助我们。您必须定义在此上下文中可见的
内容。元素是否显示
none
，它们是否以某种方式隐藏在其他元素后面或屏幕外等。只有当您知道“不可见”是什么时，您才能理解这一点。您看到了吗？在某些情况下，使用“溢出：隐藏”来“记住”容器会更有效，然后简单地使用一个函数来测试元素是否包含在其中。在某些情况下，更有效的方法是“记住”带有“overflow:hidden”的容器，然后简单地使用一个函数来测试元素是否包含在其中。