javascript - 检查元素在屏幕上是否可见 JavaScript/jQuery/iScroll

Question

我正在使用 iScroll 进行水平滚动，我有一个很长的水平表格，我正在尝试查看特定列是否可见。

我尝试了以下在网上找到的代码:

function checkVisible( elm, evalType ) {
evalType = evalType || "visible";

var vpH = $(window).height(), // Viewport Height
    st = $(window).scrollTop(), // Scroll Top
    y = $(elm).offset().top,
    elementHeight = $(elm).height();

if (evalType === "visible") return ((y < (vpH + st)) && (y > (st - elementHeight)));
if (evalType === "above") return ((y < (vpH + st)));
alert('done');
};

然而，它似乎总是告诉我该元素在屏幕上可见，即使它不可见。我可以通过其他任何方式判断此表格列是否实际显示在浏览器的屏幕上？

谢谢。

Answer 1

页面屏幕可见部分的上限将是$(window).scrollTop()

下限将为 $(window).scrollTop() + $(window).height()

(“上”和“下”是指物理边界)

确定 $(element).offset().top 是否在这些值之间，以了解您的元素是否在可见视口(viewport)中。

我已经将它嵌入到滚动处理程序中，但您可以简单地构建一个函数来测试您的元素:)

有关完整示例，请参阅此 Fiddle(当绿色 div 可见时查看控制台):http://jsfiddle.net/6v8j8z8e/3/

$(function() {
    $(window).on("scroll", function() {
        var up = $(window).scrollTop(),
            down = $(window).scrollTop() + $(window).height();
        
        if(($("div").offset().top > up) && ($("div").offset().top < down)) {
            console.log("green div is visible");
        }
    });
});

div {
    background: green;
    color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. <div>TARGET</div>Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem nesciunt consequatur perspiciatis deserunt quasi quas ex ullam obcaecati laudantium voluptatum eveniet tenetur animi debitis minima explicabo unde incidunt neque!