如何测试“轮播”中的元素是否存在（具有多个大子项的，带有“ overflow：hidden”的容器）是否在视觉上可见？ [英] How to test if an element inside a "carousel" (a container with overflow:hidden" having multiple large children) is visually visible?

问题描述

我正在寻找一种通用的（本机）JavaScript函数，该函数可以判断某个元素是否可见，并且可以考虑轮播（又称滑块）中的元素；
这些通常是带有幻灯片的容器，每个元素都位于上一个幻灯片的左侧（或右侧）-但实际上只有其中一个可见。

在此网页中可以看到一个示例：
http://www.technobuffalo.com/2015/07/22/iphone-7-concept-sports-quad-hd-retina-display -wireless-charging /

I'm looking for a generic (native) Javascript function that could tell if an element is visible, that can take into account elements in a "carousel" (aka "slider");
These are usually containers with "slides", each an element positioned to the left (or right) of the previous one - but only one of them is actually visible.
An example can be seen in this web page: http://www.technobuffalo.com/2015/07/22/iphone-7-concept-sports-quad-hd-retina-display-wireless-charging/

编辑：带有3张幻灯片的轮播示例：

An example for a carousel with 3 slides:

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

该函数应该为图像返回 false

The function should return false for the images not directly visible in the carousel.

我尝试了SO中关于可见性检测问题的答案中建议的多种技术，其中包括-检查 offsetParent ， offsetLeft ， offsetRight ，并使用 getComputedStyle 并检查显示，等等，但是对于轮播中的不可见图像，它们全部返回 true 。

I've tried numerous techniques suggested in answers in SO to questions regarding visibility detection, amongst them - checking offsetParent, offsetLeft, offsetRight, and using getComputedStyle and checking display, and more, but all of them return true for the invisible images in the carousel.

推荐答案

回答我自己的问题。

// 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;
}

它的工作方式是首先尝试找到一个带有的容器overflow：hidden ，然后如果元素位于具有 overflow：hidden 且位于容器边界之外的容器内，则函数返回 true 。

It works by first trying to find a container with overflow:hidden, then if the element is inside a container with overflow:hidden and "outside of the bounds" of the container, the function returns true.

在 while 循环中，当元素为 body 时停止，否则将一直持续到 Document ，并抛出错误，指出 window.getComputedStyle 未实现Element接口。

In the while loop we need to stop when the element is body, otherwise it will go on until Document and will throw an error saying that the argument for window.getComputedStyle "does not implement the Element interface".

我还将重新编辑该问题应更具体地解决问题。

I'll also re-edit the title of the question to be more specific to the problem.

这篇关于如何测试“轮播”中的元素是否存在（具有多个大子项的，带有“ overflow：hidden”的容器）是否在视觉上可见？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！