javascript - 当使用scaleX()显示/隐藏元素时，如何检查元素的可见性？

Question

我正在使用这个plugin创建水平时间线。您可以使用向左和向右箭头在日期之间导航。单击日期会将页脚更改为与同一日期对应的页脚。

我的问题如下:我想知道某些日期在当前视口(viewport)中是否可见。因此，例如，当插件首次加载时，会显示以下日期:“1 月 16 日”、“2 月 28 日”、“3 月 20 日”、“5 月 20 日”。当我单击右箭头时，这些日期将替换为以下日期:“7 月 9 日”、“8 月 30 日”、“9 月 15 日”、“11 月 1 日”。现在，例如，我想知道日期“16 Jan”是否可见(在本例中它不可见)。

由于每个日期都以 data-date 属性的形式添加到与每个日期相对应的 a 元素中，因此我可以获得我想要检查的元素使用以下选择器(例如“16 Jan”):

$("a[data-date='16/01/2014'");

现在为了检查可见性，我尝试了两种不同的方法:

第一种方法(如本文 answer 所示)

$("a[data-date='16/01/2014'").is(':visible');

这种方法总是返回 true，因此不起作用。

第二种方法(如本 answer 所示)

function isElementInViewport (el) {

    //special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }

    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
}

然后:

var a = $("a[data-date='16/01/2014'");
var b = isElementInViewport();

这种方法总是让我返回 true，因此也不起作用。

我可以理解这些方法可能不起作用，因为每次单击箭头后元素显示和消失的方式是由于使用了 CSS 函数scaleX()，在这种特定情况下我不知道其影响。

所以，在所有这些之后，我的问题如下:在这种特定情况下是否可以检查元素的可见性？如果是这样，我该怎么做？

Answer 1

第一种方法不起作用，因为元素实际上是“可见的”。以下行仅检查 css visibility 的值对于每个日期元素来说，该属性都是“可见”(默认值)。

$("a[data-date='16/01/2014'").is(':visible');

但是，您仍然看不到某些日期元素。这是因为这些隐藏元素实际上位于其容器之外。 第二种方法引导您找到一种可能的解决方案。以下函数接受一个元素并确定它是否在视口(viewport)中。

function isElementInViewport (el) {

    //special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
         el = el[0];
    }

    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight ||    document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
}

请注意，在上面的代码中，视口(viewport)被假定为窗口。如果您想查明某个元素是否位于屏幕区域之外，这将很有用。但您的要求略有不同。在您的示例中，视口(viewport)应该是这些日期元素的容器。如果您检查浏览器上的时间线，您会发现一个 div ，其中包含 event-wrapper 类，所有日期都隐藏在该类之外。因此，您可以对上述函数进行如下修改:

function isElementReallyInViewport (el) {

    //special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
         el = el[0];
    }

    var rect = el.getBoundingClientRect();
    var container = $('.events-wrapper')[0].getBoundingClientRect();

    return (
        rect.top >= container.top &&
        rect.left >= container.left &&
        rect.bottom <= container.bottom &&
        rect.right <= container.right
    );
}

我已经在 example 中的几个元素上对其进行了测试。您已经分享过，并且似乎工作正常。希望对您有帮助。