Javascript 如何在滚动时按类名检查屏幕上的div是否可见？

如“演示版”下面的复选框所示

你好
你好

若屏幕上任何上面的div使用类名返回true，而滚动我使用下面的脚本总是返回true，那个么如何修复它

<script>
jQuery.expr.filters.offscreen = function(el) {
return (
      (el.offsetLeft + el.offsetWidth) < 0 
      || (el.offsetTop + el.offsetHeight) < 0
      || (el.offsetLeft > window.innerWidth || el.offsetTop > window.innerHeight)
 );
};

$(window).scroll(function () {
alert($('.call').is(':offscreen'))
});
</script>

jQuery.expr.filters.offscreen=函数（el）{
返回(
（el.offsetLeft+el.offsetWidth）<0
||（标高偏移+标高偏移）小于0
||（el.offsetLeft>window.innerWidth | | el.offsetLeft>window.innerHeight）
);
};
$（窗口）。滚动（函数（）{
警报（$（'.call'）。是（':offscreen'））
});

试试这个

$(document).scroll(function () {
                if (isOnScreen($('.call:eq(0)'))) {
                    // $('.call:eq(0)') is visible on screen
                }

            });

    //this function return element is currently visible on screen or not in true / false
            function isOnScreen(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));
            }

$（文档）。滚动（函数（）{
if（isOnScreen（$（'.call:eq（0）'））{
//$（'.call:eq（0）'）在屏幕上可见
}
});
//此函数返回元素当前在屏幕上可见，或在真/假中不可见
功能ISONSCLEEN（elem）{
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=$（elem）.offset（）.top；
var elemBottom=elemTop+$（elem）.height（）；
返回（（elemBottom=docViewTop））；
}

演示

<div class="call" style="margin-top: 100px;">
    hi
</div>
<label class="label1" style="margin-top: 500px;">
</label>
<label class="label2" style="margin-top: 20px;">
</label>
<div class="call" style="margin-top: 500px;">
    hello
</div>
   <script type="text/javascript">
        $(document).scroll(function () {
            if (isOnScreen($('.call:eq(0)'))) {
                $('.label1').text('first div show') // if first call class div is visible msg display in lable
            }
            else {
                $('.label1').text('first div hide')
            }
            if (isOnScreen($('.call:eq(1)'))) {
                $('.label2').text('second div show')// if second call class div is visible msg display in lable
            }
            else {
                $('.label2').text('second div hide')
            }

        });
        function isOnScreen(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));
        }
    </script>

你好
你好
$（文档）。滚动（函数（）{
if（isOnScreen（$（'.call:eq（0）'））{
$（'.label1'）.text（'first div show'）//如果第一个调用类div可见，则在标签中显示消息
}
否则{
$（'.label1'）.text（'first div hide'）
}
if（isOnScreen（$（'.call:eq（1）'））{
$（'.label2'）.text（'second div show'）//如果第二个调用类div可见，则在标签中显示消息
}
否则{
$（'.label2'）.text（'second div hide'））
}
});
功能ISONSCLEEN（elem）{
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=$（elem）.offset（）.top；
var elemBottom=elemTop+$（elem）.height（）；
返回（（elemBottom=docViewTop））；
}

您可能想看看这个：嘿，如何判断DOM元素在当前视口中是否可见？这不是类似的问题，我想用类名做这件事，没有任何元素，请读两遍我的问题@passionateCoderok，我同意，但我的问题不是重复的@passionateCoder@wiramrathod我没说是复制品。我只是帮你找到一个好的解决方案。

<div class="call" style="margin-top: 100px;">
    hi
</div>
<label class="label1" style="margin-top: 500px;">
</label>
<label class="label2" style="margin-top: 20px;">
</label>
<div class="call" style="margin-top: 500px;">
    hello
</div>
   <script type="text/javascript">
        $(document).scroll(function () {
            if (isOnScreen($('.call:eq(0)'))) {
                $('.label1').text('first div show') // if first call class div is visible msg display in lable
            }
            else {
                $('.label1').text('first div hide')
            }
            if (isOnScreen($('.call:eq(1)'))) {
                $('.label2').text('second div show')// if second call class div is visible msg display in lable
            }
            else {
                $('.label2').text('second div hide')
            }

        });
        function isOnScreen(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));
        }
    </script>