AJAX를 통해 요소를로드하고 있습니다. 일부는 페이지를 아래로 스크롤 한 경우에만 표시됩니다.
요소가 페이지의 보이는 부분에 있는지 알 수있는 방법이 있습니까?

답변

트릭을 수행해야합니다.

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

간단한 유틸리티 기능
찾고있는 요소를 받아들이고 요소를 완전히 보거나 부분적으로 보려는 경우 유틸리티 함수를 호출 할 수 있습니다.

function Utils() {

}

Utils.prototype = {
    constructor: Utils,
    isElementInView: function (element, fullyInView) {
        var pageTop = $(window).scrollTop();
        var pageBottom = pageTop + $(window).height();
        var elementTop = $(element).offset().top;
        var elementBottom = elementTop + $(element).height();

        if (fullyInView === true) {
            return ((pageTop < elementTop) && (pageBottom > elementBottom));
        } else {
            return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
        }
    }
};

var Utils = new Utils();

용법

var isElementInView = Utils.isElementInView($('#flyout-left-container'), false);

if (isElementInView) {
    console.log('in view');
} else {
    console.log('out of view');
}

답변

바닐라 의이 답변 :

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

답변

업데이트 : IntersectionObserver 사용

지금까지 찾은 가장 좋은 방법은 jQuery appear plugin 입니다. 매력처럼 작동합니다.

요소가 스크롤되거나 사용자에게 표시 될 때 발생하는 사용자 정의 “appear”이벤트를 모방합니다.
$('#foo').appear(function() {
  $(this).text('Hello world');
});
이 플러그인은 숨겨 지거나 볼 수있는 영역 밖에있는 콘텐츠에 대한 불필요한 요청을 방지하는 데 사용할 수 있습니다.

답변

스크롤 가능한 컨테이너 안에 숨겨져 있으면 작동하는 순수한 JavaScript 솔루션이 있습니다.

여기 데모 (창 크기 조정도 시도 하십시오 )

var visibleY = function(el){
  var rect = el.getBoundingClientRect(), top = rect.top, height = rect.height, 
    el = el.parentNode
  // Check if bottom of the element is off the page
  if (rect.bottom < 0) return false
  // Check its within the document viewport
  if (top > document.documentElement.clientHeight) return false
  do {
    rect = el.getBoundingClientRect()
    if (top <= rect.bottom === false) return false
    // Check if the element is out of view due to a container scrolling
    if ((top + height) <= rect.top) return false
    el = el.parentNode
  } while (el != document.body)
  return true
};

편집 2016-03-26 : 스크롤 가능한 컨테이너의 맨 위에 숨겨져 요소를 지나가는 스크롤을 설명하기 위해 솔루션을 업데이트했습니다.
2018-10-08 편집 : 화면 위에서 스크롤하지 않으면 처리하도록 업데이트되었습니다.

답변

IntersectionObserver API 사용 (최신 브라우저의 기본)

관찰자 를 사용하여 요소가 뷰 포어 또는 스크롤 가능한 컨테이너에 표시되는지 여부를 쉽고 효율적으로 확인할 수 있습니다 .

scroll이벤트 를 첨부 하고 이벤트 콜백을 수동으로 확인할 필요가 없으므로 효율성은 다음과 같습니다.

// this is the target which is observed
var target = document.querySelector('div');

// configure the intersection observer instance
var intersectionObserverOptions = {
  root: null,
  rootMargin: '150px',
  threshold: 1.0
}
    
var observer = new IntersectionObserver(onIntersection, intersectionObserverOptions);

// provide the observer with a target
observer.observe(target);

function onIntersection(entries){
  entries.forEach(entry => {
    console.clear();
    console.log(entry.intersectionRatio)
    target.classList.toggle('visible', entry.intersectionRatio > 0);
    
    // Are we in viewport?
    if (entry.intersectionRatio > 0) {
      // Stop watching 
      // observer.unobserve(entry.target);
    }
  });
}

.box{ width:100px; height:100px; background:red; margin:1000px; }
.box.visible{ background:green; }

Scroll both Vertically & Horizontally...
<div class='box'></div>

스 니펫 확장

브라우저 지원 테이블보기 (IE / Safari에서는 지원되지 않음)

답변

jQuery Waypoints 플러그인은 여기에 아주 좋습니다.

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

플러그인 사이트 에는 몇 가지 예가 있습니다 .

답변

어때요?

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

그런 다음 요소가 다음과 같이 표시되면 원하는 것을 트리거 할 수 있습니다

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

그것은 나를 위해 잘 작동합니다.