Question

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

我的问题如下：我试图知道某些日期在当前视口中是否可见。因此，对于首次加载插件的情况，显示以下日期：“1月16日”，“2月28日”，“3月20日”，“5月20日”。当我点击右箭头时，这些日期将被以下日期取代：“7月9日”，“8月30日”，“9月15日”，“11月01日”。现在，在这一点上，我想知道，例如，日期“16 Jan”是否可见（在这种情况下，它是不可见的）。

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

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

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

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

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

这种方法总是让我回归真实，因此不起作用。

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

这种方法总是让我回归真实，因此也行不通。

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

所有这一切之后，我的问题如下：在这种特定情况下，甚至可以检查元素的可见性吗？如果是这样，我该怎么做？

Answer 1

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

$（ “一个[数据日期= '16 / 01 / 2014' ”）是（ '：可见'）;

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

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 ，其中包含 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中的几个元素进行了测试，看起来效果很好。我希望它可以帮助你。

Answer 2

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

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"));

如何使用scaleX（）显示/隐藏元素可见性？

2 个答案: