WebResourcesDepot在前段时间使用jQuery编写了一个滚动加载脚本。你可以在这里查看他们的现场演示。它们功能的关键在于:

$(window).scroll(function(){
  if  ($(window).scrollTop() == $(document).height() - $(window).height()){
    lastAddedLiveFunc();
  }
});

function lastAddedLiveFunc() { 
  $('div#lastPostsLoader').html('<img src="images/bigLoader.gif">');
  $.post("default.asp?action=getLastPosts&lastPostID="+$(".wrdLatest:last").attr("id"),
    function(data){
        if (data != "") {
          $(".wrdLatest:last").after(data);         
        }
      $('div#lastPostsLoader').empty();
    });
};

这里有另一个解决方案:

<script type="text/javascript">
$.fn.is_on_screen = function(){
    var win = $(window);
    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right ||    viewport.bottom < bounds.top || viewport.top > bounds.bottom));
 };

if( $('.target').length > 0 ) { // if target element exists in DOM
    if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded
        $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info       
    } else {
        $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
    }
}
$(window).on('scroll', function(){ // bind window scroll event
if( $('.target').length > 0 ) { // if target element exists in DOM
    if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded
        $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info
    } else {
        $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
    }
}
});
</script>

在JSFiddle中可以看到

更新:使用IntersectionObserver

目前为止我发现的最好的方法是jQuery appear插件。效果非常好。

模仿自定义的“appear”事件，该事件在元素滚动到视图或以其他方式对用户可见时触发。 $ (' # foo) .appear(函数(){ (美元)。文本(“Hello world”); })； 这个插件可以用来防止对隐藏的或在可视区域之外的内容的不必要请求。

其他答案通常不检查元素是否在视图中沿着X轴，即可能在当前视口Y范围内，但不在X范围内。这个函数检查X和Y是否显示在视口中:

function checkElInView(el) {
    if (!el || !typeof el.getBoundingClientRect === "function") return false;
    const r = el.getBoundingClientRect();
    const vw = document.documentElement.clientWidth;
    const vh = document.documentElement.clientHeight;
    const inViewX = (r.left > 0 && r.left < vw) || (r.right < vw && r.right > 0);
    const inViewY = (r.top > 0 && r.top < vh) || (r.bottom < vh && r.bottom > 0);
    return inViewX && inViewY;
}

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop(),
        docViewBottom = docViewTop + $(window).height(),
        elemTop = $(elem).offset().top,
     elemBottom = elemTop + $(elem).height();
   //Is more than half of the element visible
   return ((elemTop + ((elemBottom - elemTop)/2)) >= docViewTop && ((elemTop + ((elemBottom - elemTop)/2)) <= docViewBottom));
}

我正在寻找一种方法来查看元素是否即将进入视图，所以通过扩展上面的代码段，我设法做到了。我想我应该把这个留在这里，说不定能帮到谁

Elm =是视图中要检查的元素

scrollElement =你可以传递window或者带有滚动的父元素

Offset =如果你想让它在元素在屏幕前200px处触发，那么传递200

isscro冷景的功能(elem, scrole，抵消) { var $elem = $(elem); var $window = $); var docViewTop = $window.scrollTop(); var docViewBottom = docViewTop + $window.height(); var elemTop = $elem.抵消()top; var elemBottom = elemTop + $elem.height() 归来((elemBottom +) > = docViewBottom) &&偏移(elemTop-offset) < = docViewTop) | | ((elemBottom-offset) < = docViewBottom) && (elemTop +偏移)> = docViewTop); 的