jQuery를 사용하여 사용자가 스크롤을 중지하는 경우를 어떻게 감지할 수 있나요?

사용자가 스크롤을 중지하는 시기를 감지하는 jQuery의 스크롤 이벤트

jQuery의 scroll() 이벤트는 사용자가 스크롤하는 시기를 감지하는 데 유용합니다. 그러나 특정 시나리오에서는 스크롤이 언제 중지되었는지 알아야 합니다.

해결책:

이를 달성하려면 스크롤( ),clearTimeout() 및 setTimeout().

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

방법은 다음과 같습니다. 작동:

1. 창에 스크롤() 이벤트 핸들러를 등록합니다.
2. 핸들러 내부에서 기존 스크롤 타이머(clearTimeout())를 모두 지웁니다.
3. 설정 지연(예: 250ms)이 있는 setTimeout()을 사용하는 새로운 스크롤 타이머.
4. 스크롤 이벤트가 다음과 같은 경우 타이머가 만료되기 전에 실행되고 기존 타이머가 지워지고(clearTimeout()) 새 타이머가 설정됩니다.
5. 스크롤 이벤트 없이 타이머가 만료되면 사용자가 스크롤을 중지했다는 의미입니다.

jQuery 확장을 사용한 개선:

대체 접근 방식은 jQuery 확장을 사용하는 것입니다. "jQuery.unevent.js"라고 합니다:

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

on() 메서드에 마지막 매개변수로 지연을 전달하여 이벤트 트리거 간의 최소 간격을 지정할 수 있습니다.

이 접근 방식의 이점:

• 깨끗하고 간결한 처리 방법을 제공합니다.
• 애플리케이션의 요구 사항에 맞게 지연을 조정할 수 있습니다.
• 스크롤이 중지되었을 때 투명 효과 복원이나 제거 등의 작업을 트리거하는 데 사용할 수 있습니다. 경유 요소.

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