Question

如何在初始页面加载时使用waypoints.js检查元素是否在视图中或者是否可能？

您似乎只能将功能附加到滚动时触发的事件。

Answer 1

实际上，Waypoints.js也会在初始化时检查被跟踪元素的位置，而不仅仅是在滚动事件发生时。话虽如此，您唯一需要做的就是观察元素是否在视口底部之上。使用航点，可以通过将offset参数设置为100%来实现。这样，如果有问题的元素在视口中，则将在页面加载时调用处理函数。

下面是一个包含两个初始化航点对象的工作示例。

var waypoint1 = new Waypoint({
    element: document.getElementById('waypoint'),
    handler: function(direction) {
        console.log('#waypoint in viewport – NO OFFSET');
    }
});

var waypoint2 = new Waypoint({
    element: document.getElementById('waypoint'),
    offset: '100%',
    handler: function(direction) {
        console.log('#waypoint with OFFSET: 100% in viewport');
    }
});

#placeholder {
    height: 50vh;
    background-color: #d4cdc3;
}

#waypoint {
    background-color: #d5d0cd;
}

#bottom {
    height: 200vh;
    background-color: #a2a392;
}

<div id="placeholder"></div>
<div id="waypoint">[Test content]</div>
<div id="bottom"></div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min.js"></script>

Waypoints.js：检查元素是否在页面加载时处于视图中

1 个答案: