javascript - jQuery 从顶部获取当前 View 位置

Question

我想检查当前元素是否在 View 中。我用这个条件来检查:

if ($(window).scrollTop() > $('.element').offset().top) {
    //show
}

但问题是 $(window).scrollTop() 在不同的浏览器高度上给出不同的结果(我使用的是 FireFox，第一个数字是 .scrollTop()，第二个 - .offset().top):

现在我只是减少 Firebug 的高度(因此滚动条的大小减小):

所以我无法使用 $(window).scrollTop() 来获取我在页面中滚动的程度。
还有其他方法可以定义元素是否在 View 中吗？

Answer 1

您需要考虑这 4 个基本值:

• 窗口的高度
• 窗口滚动顶部
• 元素的顶部偏移
• 元素的高度

基于此，您将拥有:

var windowHeight = $(window).height();
var windowScrollTop = $(window).scrollTop();
var elementHeight = $(".element").height();
var elementOffsetTop = $(".element").offset().top;

if ((elementOffsetTop <= windowScrollTop + windowHeight) && (elementOffsetTop + elementHeight >= windowScrollTop))
    console.log('Visible on viewport');

请注意，使用此算法，您将能够检查该元素是否在视口(viewport)上可见，而与其高度无关，最重要的是，考虑到将窗口滚动到元素之外的情况。

当元素的最高部分或最低部分显示在视口(viewport)上时，它会说该元素可见。