javascript 滚动时是视图中的元素吗？

Posted 2021-05-04

<h2>Scroll Down! &dArr;</h2>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

function isScrolledIntoView(elem) {
    var $window = $(window),
        docViewTop = $window.scrollTop(),
        docViewBottom = docViewTop + $window.height(),
        elemTop = $(elem).offset().top,
        elemBottom = elemTop + $(elem).outerHeight();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).on("scroll", function() {

    // Example 1
    if (isScrolledIntoView('span')) {
        $('span').text('Hey there!');
    } else {
        $('span').text('Good bye!');
    }

    // Example 2
    $('div').each(function() {
        if (isScrolledIntoView(this)) {
            $(this).addClass('red');
        } else {
            $(this).removeClass('red');
        }
    });

});