jQuery有一个名为inview的插件，它添加了一个新的inview事件。

下面是jQuery插件不使用事件的代码:

$.extend($.expr[':'],{
    inView: function(a) {
        var st = (document.documentElement.scrollTop || document.body.scrollTop),
            ot = $(a).offset().top,
            wh = (window.innerHeight && window.innerHeight < $(window).height()) ? window.innerHeight : $(window).height();
        return ot > st && ($(a).height() + ot) < (st + wh);
    }
});

(function( $ ) {
    $.fn.inView = function() {
        var st = (document.documentElement.scrollTop || document.body.scrollTop),
        ot = $(this).offset().top,
        wh = (window.innerHeight && window.innerHeight < $(window).height()) ? window.innerHeight : $(window).height();

        return ot > st && ($(this).height() + ot) < (st + wh);
    };
})( jQuery );

我在一个叫James的家伙的评论中发现了这一点(http://remysharp.com/2009/01/26/element-in-view-event-plugin/)

这将考虑元素的任何填充、边框或边距，以及大于视口本身的元素。

function inViewport($ele) {
    var lBound = $(window).scrollTop(),
        uBound = lBound + $(window).height(),
        top = $ele.offset().top,
        bottom = top + $ele.outerHeight(true);

    return (top > lBound && top < uBound)
        || (bottom > lBound && bottom < uBound)
        || (lBound >= top && lBound <= bottom)
        || (uBound >= top && uBound <= bottom);
}

要调用它，可以使用这样的代码:

var $myElement = $('#my-element'),
    canUserSeeIt = inViewport($myElement);

console.log(canUserSeeIt); // true, if element is visible; false otherwise

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

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); 的

我添加了我的代码修改。不幸的是，我可以看到每个人都在他们的版本，每个人都忽略了debance功能的使用。哪个答案是让你的事件不触发，例如，在滚动时每秒200次。

$(window).scroll(function(){
        if (isInView($('.class'))){
            debounce(
                someFunction(), 5
            )
        }
    });
    function isInView(elem){
        if(document.documentElement.clientWidth > 991){
            return $(elem).offset().top - $(window).scrollTop() < $(elem).height();
        }else {
            doSometing;
        }
    }

仅限Javascript:)

function isInViewport(element) {
  var rect = element.getBoundingClientRect();
  var html = document.documentElement;
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || html.clientHeight) &&
    rect.right <= (window.innerWidth || html.clientWidth)
  );
}

简单的检查元素(el)是否在可滚动的div (holder)中可见

function isElementVisible (el, holder) {
  holder = holder || document.body
  const { top, bottom, height } = el.getBoundingClientRect()
  const holderRect = holder.getBoundingClientRect()

  return top <= holderRect.top
    ? holderRect.top - top <= height
    : bottom - holderRect.bottom <= height
}

使用jQuery:

var el = $('tr:last').get(0);
var holder = $('table').get(0);
var isVisible = isElementVisible(el, holder);