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


85

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


아니요, 다른 함수에서 if(scolling). 가 if(window.onscroll)같은?
user1365010

scrolling에서 설정할 수 있습니다 onscroll. (ps : 아니요, 동일하지 않습니다)
Rocket Hazmat

3
사용자는 '스크롤링'하지 않습니다. 스크롤 상태가 아닌 스크롤 동작 만 있습니다.
Kendall Frey

1
@ user1365010 : 오! 나는 그것을 생각하지 않았다. 정확히 무엇을하려는 거죠? 사용자가 스크롤하고 있는지 알아야하는 이유는 무엇입니까?
Rocket Hazmat

2
흥미 롭군. 스크롤을 '재부팅'한 적이 없습니다. 자세히 설명 하시겠습니까?
Kendall Frey

답변:


87

이것은 작동합니다 :

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

그러나 그것은 setInterval의 함수입니다!
user1365010

4
@ user1365010 : 무엇입니까? 무슨 소리 야? 질문에 더 자세한 정보를 추가해야합니다.
Rocket Hazmat

6
@ user1365010이 대답은 (핵심에서) 당신이 할 수있는 최선입니다.
Matt Ball

# 참고로, 컨테이너가 스크롤 될 때 작동하지 않는 것 같습니다. body.scroll ()이 작동하므로 둘 다 추가했습니다.
Selva Ganapathi

12

태그에 자바 스크립트라고 말 했으므로 @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);
    });
});​

2
jQuery는 브라우저 차이를 추상화해야하지 않습니까? 다른 브라우저에 대한 방법이있는 이유는 무엇입니까? 가 $('#elem').bind('scroll'충분하지? 편집 : 신경 쓰지 마세요, 두 번째 예를 보았습니다.
Rocket Hazmat

1
때때로 약간의 네이티브 자바 스크립트에 문제가 없습니다.
AGDM 2014 년

의미하지 e.originalEvent.wheelDelta || e.originalEvent.detail않습니까?
JacobRossDev

2
경고 : 이 답변의 휠 이벤트는 표준이 아니며 더 이상 사용되지 않습니다. wheel이벤트를 사용하십시오 .
Alexander O'Mara

나는이 시험하지 않았다 그러나 MDN DOMMouseScroll에 따라 대부분의 브라우저에서 지원되지 않습니다 developer.mozilla.org/en-US/docs/Web/Events/DOMMouseScroll
Liron Yahdav

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

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

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


0

간격을 사용하여 확인

사용자가 스크롤했는지 확인한 다음 그에 따라 작업을 수행하도록 간격을 설정할 수 있습니다.

그의 기사 에서 위대한 John Resig 로부터 빌림 .

예:

    let didScroll = false;

    window.onscroll = () => didScroll = true;

    setInterval(() => {
        if ( didScroll ) {
            didScroll = false;
            console.log('Someone scrolled me!')
        }
    }, 250);

라이브 예시보기

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.