检测给定 class 的任何元素是否在 javascript/jquery 的视图中

Question

我写了一个脚本来检测某个字符串是否存在于页面的 HTML 中，然后用包含 class 的范围包裹该字符串。此字符串可以在同一页面中出现多次。

然后我会检测这些元素中的任何一个何时在浏览器中可见，然后触发事件以使用 jquery 的 show() 方法向页面显示警告。

想法是，当元素离开视口时，使用 jquery 的 hide() 方法隐藏警告。

当只有一个元素实例时，我可以正常工作，但如果有多个，则 show() 和 hide() 方法之间会发生冲突。

$(document).ready(function(){

    $("body").html(function () {
        return $(this).html()
            .replace("word", "<span class='custom-class'>word</span>")
    });

    $(window).scroll(function() {
        $(".custom-class").each(function(){
            var top_of_element = $(this).offset().top;
            var bottom_of_element = $(this).offset().top + $(this).outerHeight();
            var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
            var top_of_screen = $(window).scrollTop();

            if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
                $('.custom-warning').show();
            } else {
                $('.custom-warning').hide();
            }
        });
    });

});

'word' 的第一个实例在视图中时永远不会显示警告，因为它随后被不在视图中的第二个实例关闭。

有人知道如何克服这个问题吗？

Answer 1

我假设正确的行为是：如果视口中有匹配元素，则显示警告。

这应该可以工作：

$(window).scroll(function() {
        $('.custom-warning').hide();
        $(".custom-class").each(function(){
            var top_of_element = $(this).offset().top;
            var bottom_of_element = $(this).offset().top + $(this).outerHeight();
            var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
            var top_of_screen = $(window).scrollTop();

            if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
                $('.custom-warning').show();
            }
        });
    });

另一个提示：因为滚动经常触发，所以我会将滚动功能包装到去抖动功能中。

检测给定 class 的任何元素是否在 javascript/jquery 的视图中

Detect if any elements with given class are in view with javascript/jquery

html

javascript

jquery

show