스크롤 후 동적으로 로드된 요소가 표시되는지 어떻게 확인할 수 있나요?

스크롤 후 요소 가시성 결정

AJAX를 통해 요소를 동적으로 로드하는 경우 요소가 사용자에게 표시되는지 확인하는 것이 중요할 수 있습니다. 페이지를 아래로 스크롤한 후에만 요소가 표시되는 경우 개발자는 요소의 현재 표시 상태를 확인하는 방법을 궁금해할 수 있습니다.

이 문제에 대한 효과적인 해결책 중 하나는 요소가 표시되는지 확인하는 JavaScript 기능을 활용하는 것입니다. 뷰포트 내에서. 이러한 함수는 페이지의 요소 위치와 사용자의 현재 스크롤 위치를 모두 고려합니다.

JavaScript 구현

다음 JavaScript 코드는 요소 가시성을 확인하기 위한 포괄적인 솔루션을 제공합니다.

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

사용

이러한 기능을 사용하려면 확인하려는 요소를 인수로 제공하기만 하면 됩니다. 부분 가시성 검사의 경우 두 번째 인수로 false를 사용하고, 전체 가시성 검사의 경우 true를 사용합니다.

예:

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

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

이러한 기술을 사용하여 개발자는 요소 가시성을 효과적으로 모니터링할 수 있습니다. , 최적의 사용자 경험과 관련 콘텐츠 표시를 보장합니다.

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