JavaScript -检测元素是否在视口中停留n秒
JavaScript -检测元素是否在视口中停留n秒
提问于 2018-08-02 06:51:55
每当某个css类的内容块在5秒内可见(这是用户正在阅读内容的标志)时，我需要推送一个数据层事件。
我已经使用了类似这样的东西：
$(window).on(‘scroll resize’, function() {
$(‘.myClass’).each(function(element) {
If (isInViewport(element)) {
setTimeout(function() {
if (isInViewport(element)) {
... // Push the data layer event.
}
}, 5000);
}
});
});
function isInViewport(element) {
... // Returns true if element is visible.
};这是我凭记忆写的，所以它可能不是100%正确的，但要点是我试着：
- 测试scroll/resize
- If one上每个myClass元素的可见性，请等待5秒，然后再次检查同一元素。
问题是，当setTimeout运行isInViewport时，元素是未定义的。也许jQuery的.each和setTimeout是不匹配的？
Stack Overflow用户
发布于 2018-08-02 10:34:52
您可以使用此函数检查某个元素是否在视口中(来自this answer)：
function isElementInViewport (el) {
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() */
);
}
<input id="inViewport"/>
<span style="margin-left: 9999px;" id="notInViewport">s</span>
<script>
function isElementInViewport (el) {
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() */
);
}
console.log("#inViewport in viewport: "+isElementInViewport(document.getElementById("inViewport")));
console.log("#notInViewport in viewport: "+isElementInViewport(document.getElementById("notInViewport")));
</script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51643290
复制相关文章
相似问题
腾讯云开发者
