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

Question

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

我的问题如下：我想知道某些日期是否在当前视口中可见。因此，对于插件首次加载的情况，会显示以下日期：“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

一种方法是比较水平位置：

function isElementVisible($elOrDate) {

    var $el = (typeof $elOrDate === "string") ? $("a[data-date='" + $elOrDate + "'") : $elOrDate;

    // We need the .event-wrapper element of the timeline
    let $eventWrapper = $el.closest('.event-wrapper');

    // Get the position of the timeline:
    var timelinePosition = $eventWrapper[0].getBoundingClientRect();

    // Then get the position of the element you're interested in:    
    var targetPosition = $el.getBoundingClientRect();

    var targetIsNotOffToTheLeft  = targetPosition.right > timelinePosition.left;
    var targetIsNotOffToTheRight = targetPosition.left < timelinePosition.right;

    // The timeline is not scrollable vertically, so we only need to worry
    // about the horizontal position
    return targetIsNotOffToTheLeft && targetIsNotOffToTheRight;

}

// Usage:

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

// Or with just the date:

console.log(isElementVisible("16/01/2014"));

Answer 2

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

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

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

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() */
    );
}

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

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 中的几个元素上对其进行了测试，它似乎工作正常。希望对你有帮助。