Question

这个问题与我20小时前发布的问题有关。尝试了2-3种方法，我仍然无法解决它。我想要做的是检测名为#cover的HTML元素的可见性，并对该元素执行动画。 “可见性”是指设备视口中的部分或完全可见性。

.is（：visible）的工作原理是，一旦呈现页面，就会检测到元素并触发警报。但这不是我需要的。

我尝试过的最新功能是：

$.fn.isVisible = function() {
var rect = this[0].getBoundingClientRect();
return (
    (rect.height > 0 || rect.width > 0) &&
    rect.bottom >= 0 &&
    rect.right >= 0 &&
    rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.left <= (window.innerWidth || document.documentElement.clientWidth)
);
};

    if (isVisible(document.getElementById("cover"))) {
    alert('Cover VISIBLE');
}

else alert('Cover NOT VISIBLE');

警报用于调试目的。

我可以让点击事件为#cover工作，但我无法让'工作可见'。非常感谢帮助。

PS如何在帖子中发表评论时如何换行？在完成评论之前，我一直在发表评论。：|

Answer 1

尝试......

var thisElement = document.getElementById("cover");
if ($(thisElement).isVisible() {
  alert('Cover VISIBLE');
}
else {
  alert('Cover NOT VISIBLE');
}

...因为你创建了isVisible函数作为jQuery函数，它应该在jQuery元素上运行。

Answer 2

谢谢大家......我通过回到isInViewport函数实现了我想要的功能，我以前曾尝试过这个功能，并且没有成功，并使其正常工作。

为什么我的jQuery函数不会在视口中检测元素可见性？

2 个答案: