当使用 scaleX() shown/hidden 时如何检查元素可见性？

Question

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

我的问题如下：我想知道某些日期是否在当前视口中可见。因此，对于首次加载插件的情况，会显示以下日期：“16 Jan”、“28 Feb”、“20 Mar”、“20 May”。当我单击向右箭头时，这些日期将替换为以下日期：“7 月 9 日”、“8 月 30 日”、“9 月 15 日”、“11 月 1 日”。现在，在这一点上，我想知道，例如，日期“16 Jan”是否可见（在这种情况下它是不可见的）。

由于每个日期都以 data-date 属性的形式添加到与每个日期对应的 a 元素中，因此我可以使用以下选择器（示例对于“1 月 16 日”）：

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

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

第一种方法（如此answer中所见）

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

这种方法总是 returns 我是真的，因此行不通。

第二种方法（如此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();

这种方法总是 returns 我是对的，因此也行不通。

我可以理解这些方法可能行不通，因为元素在每次单击箭头后显示和消失的方式是由于使用了 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

第一种方法 不起作用，因为元素实际上是 'visible'。下面一行简单地检查 css visibility 属性的值，即每个日期元素的 'visible'（默认值）。

$("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。如果你想知道一个元素是否在屏幕区域之外，这将很有用。但是您的要求略有不同。在您的示例中，视口应该是这些日期元素的容器。如果您检查浏览器上的时间轴，您会发现 div 和 class 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 中的几个元素上对其进行了测试，它似乎工作正常。希望对你有帮助。

当使用 scaleX() shown/hidden 时如何检查元素可见性？

How can I check for element visibility when it is being shown/hidden with scaleX()?

javascript

jquery

timeline

visibility