developer tip

사용자가 스크롤하고 있는지 감지

copycodes 2020. 10. 30. 08:14
반응형

사용자가 스크롤하고 있는지 감지


사용자가 스크롤하는 경우 JavaScript에서 어떻게 감지 할 수 있습니까?


이것은 작동합니다 :

window.onscroll = function (e) {  
// called when the window is scrolled.  
} 

편집하다:

당신은 이것이 TimeInterval의 함수라고 말했습니다 ..
이렇게 해보세요 :

userHasScrolled = false;
window.onscroll = function (e)
{
    userHasScrolled = true;
}

그런 다음 Interval 안에 다음을 삽입하십시오.

if(userHasScrolled)
{
//do your code here
userHasScrolled = false;
}

태그에 자바 스크립트라고 말 했으므로 @Wampie Driessen 게시물이 도움이 될 수 있습니다.

또한 기여하고 싶기 때문에 필요한 경우 jQuery를 사용할 때 다음을 사용할 수 있습니다.

 //Firefox
 $('#elem').bind('DOMMouseScroll', function(e){
     if(e.detail > 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

 //IE, Opera, Safari
 $('#elem').bind('mousewheel', function(e){
     if(e.wheelDelta< 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

다른 예시:

$(function(){
    var _top = $(window).scrollTop();
    var _direction;
    $(window).scroll(function(){
        var _cur_top = $(window).scrollTop();
        if(_top < _cur_top)
        {
            _direction = 'down';
        }
        else
        {
            _direction = 'up';
        }
        _top = _cur_top;
        console.log(_direction);
    });
});​

window.addEventListener("scroll",function(){
    window.lastScrollTime = new Date().getTime()
});
function is_scrolling() {
    return window.lastScrollTime && new Date().getTime() < window.lastScrollTime + 500
}

사용자가 "더 이상 스크롤하지 않는"것으로 간주되는 마지막 스크롤 이벤트 이후의 시간 (밀리 초)으로 500을 변경합니다.

( 전자가를 사용하는 다른 코드와 잘 공존 할 수 있기 때문에 addEventListener낫습니다 .)onScrollonScroll

참고 URL : https://stackoverflow.com/questions/10605197/detect-if-user-is-scrolling

반응형