jQuery 检查元素是否在视口中可见 - Javascript

当网页中有大量元素时，要知道哪些元素是否在视口中可见变得很有用。通过使用 jQuery，可以快速简便地实现这一功能。在本文中，我们将学习如何使用 jQuery 检查元素是否在视口中可见。

检查元素是否在视口中可见

方法 1: 纯 jQuery

以下是一个使用纯 jQuery 的示例代码。该代码将检查指定的元素是否在视口中可见，并根据其结果在控制台打印出相应的信息。

$(document).ready(function(){
    $(window).scroll(function(){
        $(".my-element").each(function(){
            if(isScrolledIntoView($(this))){
                console.log($(this).attr("id") + " is visible");
            }
        });
    });
});

function isScrolledIntoView(elem){
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = elem.offset().top;
    var elemBottom = elemTop + elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

如上代码所述，我们使用 $(window).scroll() 函数检测窗口的滚动事件，然后用 .each() 函数遍历每个需要检查的元素。接着，我们调用了 isScrolledIntoView() 函数来检查每个元素是否在视口中可见。

方法 2: jQuery 插件

另一种更为方便的方法是使用 jQuery 插件。以下是一个基于 jquery-visible 插件的示例代码，该代码将检查指定元素是否在视口中可见，并在控制台打印相应信息。

$(document).ready(function(){
    $(window).scroll(function(){
        $(".my-element").each(function(){
            if($(this).visible()){
                console.log($(this).attr("id") + " is visible");
            }
        });
    });
});

注意，这里我们使用了 visible() 函数来检查每个元素是否在视口中可见。jQuery 已经将其封装成了一个插件，因此我们不需要定义任何函数。

结论

通过以上的示例代码，我们可以看到 jQuery 提供了一些简单而方便的解决方案，来检查元素是否在视口中可见。所以如果你打算在自己的网站或者应用程序中实现可见性检查，那么 jQuery 显然是一个不错的选择。