jQuery에서 스크롤 끝을 어떻게 감지할 수 있나요?

jQuery: 스크롤 끝 감지

소개:
웹 개발에서 사용자 스크롤 처리는 사용자 경험 향상에 매우 중요할 수 있습니다. . jQuery의 scroll() 함수는 스크롤 이벤트를 감지하는 편리한 방법을 제공합니다. 그러나 특정 시나리오에서는 사용자가 스크롤을 중지한 시점을 이해하는 것도 중요합니다.

문제 이해:
제공된 코드는 스크롤할 때 클래스를 제거하는 방법을 보여줍니다. 그러나 OP는 스크롤이 중지되면 클래스를 다시 추가하려고 합니다. 이는 제거된 클래스가 스크롤 중에 원하는 투명도 효과와 충돌하기 때문입니다.

스크롤 종료 감지:
이를 달성하려면 스크롤이 중단된 시점을 감지해야 합니다. 다음은 시간 제한이 있는 scroll() 함수를 사용하는 솔루션입니다.

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        console.log("Haven't scrolled in 250ms!");
    }, 250));
});

이 코드는 시간 제한을 250밀리초로 설정합니다. 사용자가 스크롤하면 시간 초과가 재설정됩니다. 사용자가 250밀리초 동안 스크롤을 중지하면 시간 초과 기능이 실행되어 스크롤이 끝났음을 나타냅니다.

고급 솔루션:
정확한 타이밍이 중요한 상황에서는 jQuery를 사용하는 것이 좋습니다. event.js. 이 확장은 특정 지연 후에만 이벤트 핸들러가 실행되도록 jQuery의 이벤트 처리를 향상시킵니다.

$(window).on('scroll', function(e) {
    console.log(e.type + '-event was 250ms not triggered');
}, 250);

이 확장을 사용하면 250밀리초의 지연을 지정하여 스크롤 이벤트가 발생한 후에만 콜백을 트리거할 수 있습니다. 그 기간 동안 중지되었습니다.

위 내용은 jQuery에서 스크롤 끝을 어떻게 감지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!