스크롤 후 요소가 표시되는지 어떻게 확인할 수 있나요?

스크롤 후 요소 가시성 보장

스크롤에 숨겨진 요소 식별

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

이러한 기능을 구현하면 스크롤 후 요소 가시성을 효과적으로 감지하고 그에 따라 대응하세요.

위 내용은 스크롤 후 요소가 표시되는지 어떻게 확인할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!