使用scaleX（）显示/隐藏元素时，如何检查元素的可见性？

Question

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

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

由于每个日期被添加到a对应于每个日期在一个形式元素data-date属性我可以得到，我想检查用以下选择器（例如，对于“1月16日”）的元件：

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

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

第一种方法 （如本答案所示 ）

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

然后：

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

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

我知道这些方法可能行不通，因为每次单击箭头后元素显示和消失的方式是由于使用CSS函数scaleX（）造成的，在这种特定情况下，我不知道它的影响。

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

Answer 1

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

$（“ 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 。 如果您想确定元素是否在屏幕区域之外，这将很有用。 但是您的要求略有不同。 在您的示例中，查看端口应该是这些日期元素的容器。 如果您在浏览器上检查时间线，您会发现一个带有class 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
    );
}

在您共享的示例中 ，我已经在几个元素上对其进行了测试，它似乎运行良好。 希望对您有帮助。

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