Javascript 如何检查滚动后元素是否可见？

我通过AJAX加载元素。其中一些只有在向下滚动页面时才可见。有没有办法知道某个元素现在是否在页面的可见部分？

我的应用程序中有这样一个方法，但它不使用jQuery：

/* Get the TOP position of a given element. */
function getPositionTop(element){
    var offset = 0;
    while(element) {
        offset += element["offsetTop"];
        element = element.offsetParent;
    }
    return offset;
}

/* Is a given element is visible or not? */
function isElementVisible(eltId) {
    var elt = document.getElementById(eltId);
    if (!elt) {
        // Element not found.
        return false;
    }
    // Get the top and bottom position of the given element.
    var posTop = getPositionTop(elt);
    var posBottom = posTop + elt.offsetHeight;
    // Get the top and bottom position of the *visible* part of the window.
    var visibleTop = document.body.scrollTop;
    var visibleBottom = visibleTop + document.documentElement.offsetHeight;
    return ((posBottom >= visibleTop) && (posTop <= visibleBottom));
}

/*获取给定元素的顶部位置*/
函数getPositionTop（元素）{
var偏移=0；
while（元素）{
偏移量+=元素[“偏移量”]；
element=element.offsetParent；
}
返回偏移量；
}
/*给定元素是否可见*/
函数isElementVisible（eltId）{
var elt=document.getElementById（eltId）；
如果（！elt）{
//未找到元素。
返回false；
}
//获取给定元素的顶部和底部位置。
var posTop=getPositionTop（elt）；
var posBottom=事后+英语教学离视；
//获取窗口*可见*部分的顶部和底部位置。
var visibleTop=document.body.scrollTop；
var visibleBottom=visibleTop+document.documentElement.offsetHeight；
return（（posBottom>=visibleTop）和&（posTop前一段时间编写的。您可以查看它们的。它们功能的主要部分是：

$(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();
    });
};

$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）==$（文档）.height（）-$（窗口）.height（））{
lastAddedLiveFunc（）；
}
});
函数lastAddedLiveFunc（）{
$（'div#lastposloader'）.html（“”）；
$.post（“default.asp？action=getLastPosts&lastPostID=“+$（“.wrdLatest:last”）.attr（“id”），
功能（数据）{
如果（数据！=“”）{
$（.wrdLatest:last”）。在（数据）之后；
}
$（'div#lastposloader'）.empty（）；
});
};
这应该可以做到：

function isScrolledIntoView(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));
}

函数是crolledintoview（elem）{
var docViewTop=$（窗口）.scrollTop（），
docViewBottom=docViewTop+$（窗口）.height（），
elemTop=$（elem）.offset（）.top，
elemBottom=elemTop+$（elem）.height（）；
//元素的一半以上可见吗
返回（（elemTop+（（elemBottom-elemTop）/2））>=docViewTop&（（elemTop+（（elemBottom-elemTop）/2））更新：使用


到目前为止，我找到的最好的方法是。像符咒一样有效

模拟自定义“出现”事件，当元素滚动到视图中或用户可见时触发该事件

$('#foo').appear(function() {
  $(this).text('Hello world');
});

此插件可用于防止对隐藏或在可视区域之外的内容提出不必要的请求

jQuery Waypoints插件在这里运行得非常好

$('.entry').waypoint(function() {
   alert('You have scrolled to an entry.');
});

上有一些示例。
有一个添加了新的“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 );

$.extend（$.expr['：']{
查看：功能（a）{
var st=（document.documentElement.scrollTop | | document.body.scrollTop），
ot=$（a）.offset（）.top，
wh=（window.innerHeight&&window.innerHeight<$（window.height（））？window.innerHeight:$（window.height（）；
返回ot>st&（$（a）.height（）+ot）<（st+wh）；
}
});
（函数（$）{
$.fn.inView=函数（）{
var st=（document.documentElement.scrollTop | | document.body.scrollTop），
ot=$（this）.offset（）.top，
wh=（window.innerHeight&&window.innerHeight<$（window.height（））？window.innerHeight:$（window.height（）；
返回ot>st&（$（this）.height（）+ot）<（st+wh）；
};
})（jQuery）；

我在一个叫James的家伙的评论（）中找到了这个，如果你想在另一个div中滚动这个项目

function isScrolledIntoView (elem, divID) 

{

    var docViewTop = $('#' + divID).scrollTop();


    var docViewBottom = docViewTop + $('#' + divID).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
}

函数是crolledintoview（elem，divID）
{
var docViewTop=$（'#'+divID）.scrollTop（）；
var docViewBottom=docViewTop+$（'#'+divID）.height（）；
var elemTop=$（elem）.offset（）.top；
var elemBottom=elemTop+$（elem）.height（）；
返回（（elemBottom=docViewTop））；
}
我需要检查可滚动DIV容器中元素的可见性

    //p = DIV container scrollable
    //e = element
    function visible_in_container(p, e) {
        var z = p.getBoundingClientRect();
        var r = e.getBoundingClientRect();

        // Check style visiblilty and off-limits
        return e.style.opacity > 0 && e.style.display !== 'none' &&
               e.style.visibility !== 'hidden' &&
               !(r.top > z.bottom || r.bottom < z.top ||
                 r.left > z.right || r.right < z.left);
    }

var isScrolledIntoView = function(elem, container) {
    var containerHeight = $(container).height();
    var elemTop = $(elem).position().top;
    var elemBottom = elemTop + $(elem).height();
    return (elemBottom > 0 && elemTop < containerHeight);
}

//p=DIV容器可滚动
//e=元素
函数在容器中可见（p，e）{
var z=p.getBoundingClientRect（）；
var r=e.getBoundingClientRect（）；
//检查样式的可视性和禁区
返回e.style.opacity>0&&e.style.display！=“无”&&
e、 style.visibility！=“隐藏”&&
！（右上>z下| |右下z.右| |右
Tweek Scott Dowding的酷功能满足了我的需求-
这用于查找元素是否刚刚滚动到屏幕中，即它的上边缘

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

函数是crolledintoview（elem）
{
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=$（elem）.offset（）.top；
返回（（elemTop=docViewTop））；
}
修改了接受的答案，因此元素必须将其显示属性设置为“无”以外的值，才能使质量保持可见

function isScrolledIntoView(elem) {
   var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();
  var elemDisplayNotNone = $(elem).css("display") !== "none";

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && elemDisplayNotNone);
}

函数是crolledintoview（elem）{
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=$（elem）.offset（）.top；
var elemBottom=elemTop+$（elem）.height（）；
变量elemDisplayNotNone=$（elem）.css（“显示”）！==“无”；
返回（（elemBottom=docViewTop）和&elemDisplayNotNone）；
}
isScrolledIntoView是一个非常必要的函数，因此我尝试了它，它适用于不比视口高的元素，但如果元素比视口大，它就不起作用。要解决此问题，请轻松更改条件

return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));

返回（（elemBottom=docViewTop））；

为此：

return (docViewBottom >= elemTop && docViewTop <= elemBottom);

return（docViewBottom>=elemTop&&docViewTop这是我的纯JavaScript解决方案，如果它也隐藏在可滚动的容器中，它也可以工作

（也尝试调整窗口的大小）

var visibleY=函数（el）{
var rect=el.getBoundingClientRect（），top=rect.top，height=rect.height，
el=el.parentNode
//检查元件的底部
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));

return (docViewBottom >= elemTop && docViewTop <= elemBottom);

<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>

function isScrolledIntoView(el) {
    var rect = el.getBoundingClientRect();
    var elemTop = rect.top;
    var elemBottom = rect.bottom;

    // Only completely visible elements return true:
    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    // Partially visible elements return true:
    //isVisible = elemTop < window.innerHeight && elemBottom >= 0;
    return isVisible;
}

function isInView(elem){
   return $(elem).offset().top - $(window).scrollTop() < $(elem).height() ;
}

$(window).scroll(function(){
   if (isInView($('.classOfDivToCheck')))
      //fire whatever you what 
      dothis();
})

Element.implement({
inVerticalView: function (full) {
    if (typeOf(full) === "null") {
        full = true;
    }

    if (this.getStyle('display') === 'none') {
        return false;
    }

    // Window Size and Scroll
    var windowScroll = window.getScroll();
    var windowSize = window.getSize();
    // Element Size and Scroll
    var elementPosition = this.getPosition();
    var elementSize = this.getSize();

    // Calculation Variables
    var docViewTop = windowScroll.y;
    var docViewBottom = docViewTop + windowSize.y;
    var elemTop = elementPosition.y;
    var elemBottom = elemTop + elementSize.y;

    if (full) {
        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
            && (elemBottom <= docViewBottom) && (elemTop >= docViewTop) );
    } else {
        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }
},
inHorizontalView: function(full) {
    if (typeOf(full) === "null") {
        full = true;
    }

    if (this.getStyle('display') === 'none') {
        return false;
    }

    // Window Size and Scroll
    var windowScroll = window.getScroll();
    var windowSize = window.getSize();
    // Element Size and Scroll
    var elementPosition = this.getPosition();
    var elementSize = this.getSize();

    // Calculation Variables
    var docViewLeft = windowScroll.x;
    var docViewRight = docViewLeft + windowSize.x;
    var elemLeft = elementPosition.x;
    var elemRight = elemLeft + elementSize.x;

    if (full) {
        return ((elemRight >= docViewLeft) && (elemLeft <= docViewRight)
            && (elemRight <= docViewRight) && (elemLeft >= docViewLeft) );
    } else {
        return ((elemRight <= docViewRight) && (elemLeft >= docViewLeft));
    }
},
inView: function(full) {
    return this.inHorizontalView(full) && this.inVerticalView(full);
}});

function isOnScreen(element) {
  var elementOffsetTop = element.offset().top;
  var elementHeight = element.height();

  var screenScrollTop = $(window).scrollTop();
  var screenHeight = $(window).height();

  var scrollIsAboveElement = elementOffsetTop + elementHeight - screenScrollTop >= 0;
  var elementIsVisibleOnScreen = screenScrollTop + screenHeight - elementOffsetTop >= 0;

  return scrollIsAboveElement && elementIsVisibleOnScreen;
}

var isScrolledIntoView = function(elem, container) {
    var containerHeight = $(container).height();
    var elemTop = $(elem).position().top;
    var elemBottom = elemTop + $(elem).height();
    return (elemBottom > 0 && elemTop < containerHeight);
}

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

jQuery.extend(jQuery.expr[':'], {  
    inview: function (elem) {
        var t = $(elem);
        var offset = t.offset();
        var win = $(window); 
        var winST = win.scrollTop();
        var elHeight = t.outerHeight(true);

        if ( offset.top > winST - elHeight && offset.top < winST + elHeight + win.height()) {
            return true;    
        }    
        return false;  
    }
});

$(".my-elem:inview"); //returns only element that is in view
$(".my-elem").is(":inview"); //check if element is in view
$(".my-elem:inview").length; //check how many elements are in view

$(document).scroll(function() {
    if($("#div2").is(':onScreen')) {
        console.log("Element appeared on Screen");
        //do all your stuffs here when element is visible.
    }
    else {
        console.log("Element not on Screen");
        //do all your stuffs here when element is not visible.
    }
});

<div id="div1" style="width: 400px; height: 1000px; padding-top: 20px; position: relative; top: 45px"></div> <br>
<hr /> <br>
<div id="div2" style="width: 400px; height: 200px"></div>

#div1 {
    background-color: red;
}
#div2 {
    background-color: green;
}

function isScrolledIntoView(el) {
  // check for 75% visible
  var percentVisible = 0.75;
  var elemTop = el.getBoundingClientRect().top;
  var elemBottom = el.getBoundingClientRect().bottom;
  var elemHeight = el.getBoundingClientRect().height;
  var overhang = elemHeight * (1 - percentVisible);

  var isVisible = (elemTop >= -overhang) && (elemBottom <= window.innerHeight + overhang);
  return isVisible;
}

function(element, percentX, percentY){
    var tolerance = 0.01;   //needed because the rects returned by getBoundingClientRect provide the position up to 10 decimals
    if(percentX == null){
        percentX = 100;
    }
    if(percentY == null){
        percentY = 100;
    }

    var elementRect = element.getBoundingClientRect();
    var parentRects = [];

    while(element.parentElement != null){
        parentRects.push(element.parentElement.getBoundingClientRect());
        element = element.parentElement;
    }

    var visibleInAllParents = parentRects.every(function(parentRect){
        var visiblePixelX = Math.min(elementRect.right, parentRect.right) - Math.max(elementRect.left, parentRect.left);
        var visiblePixelY = Math.min(elementRect.bottom, parentRect.bottom) - Math.max(elementRect.top, parentRect.top);
        var visiblePercentageX = visiblePixelX / elementRect.width * 100;
        var visiblePercentageY = visiblePixelY / elementRect.height * 100;
        return visiblePercentageX + tolerance > percentX && visiblePercentageY + tolerance > percentY;
    });
    return visibleInAllParents;
};

pos = elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top;

var window_bottom_position = window.scrollY + window.innerHeight;

function getElementWindowTop(elem){
    return elem && typeof elem.getBoundingClientRect === 'function' ? elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top : 0;
}

var element_top_position = getElementWindowTop(element);

var element_bottom_position = element_top_position + element.clientHeight;

if(element_bottom_position >= window.scrollY 
&& element_top_position <= window_bottom_position){
    //element is in view
else
    //element is not in view

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
}

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

function isScrolledIntoView(el) {
  const { top, bottom } = el.getBoundingClientRect()
  return top >= 0 && bottom <= window.innerHeight
}

function isSeen(el) {
  return el.getBoundingClientRect().bottom <= window.innerHeight
}

const isSeen = el => el.getBoundingClientRect().bottom <= window.innerHeight

 /**
 * Is element within visible region of a scrollable container
 * @param {HTMLElement} el - element to test
 * @returns {boolean} true if within visible region, otherwise false
 */
 function isScrolledIntoView(el) {
      var rect = el.getBoundingClientRect();
      return (rect.top >= 0) && (rect.bottom <= window.innerHeight);
 }

var observer = new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true)
        console.log('Element has just become visible in screen');
}, { threshold: [0] });

observer.observe(document.querySelector("#main-container"));