jQuery 스크롤 이벤트의 방향을 어떻게 확인할 수 있습니까?


344

나는이 효과에 뭔가를 찾고 있습니다 :

$(window).scroll(function(event){
   if (/* magic code*/ ){
       // upscroll code
   } else {
      // downscroll code
   }
});

어떤 아이디어?


탄성 스크롤와 가진 자 문제의 경우,이 응답 사용하십시오 stackoverflow.com/questions/7154967/jquery-detect-scrolldown
티모시 달튼

1
wheel요즘 이벤트 를 사용하는 것이 가장 쉽습니다 : stackoverflow.com/a/33334461/3168107 .
Shikkediel

답변:


699

현재 및 scrollTop이전 확인scrollTop

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});

16
이에 대한 감수성을 설정하는 방법은 무엇입니까?
코코아 코더

8
코드 펜 에서 예제를 만들었습니다 . 어쩌면 나는 인기 때문에 jQuery 플러그인 으로이 답변을 업데이트 할 것입니다.
Josiah Ruddell

3
이 코드가있는 이전 페이지로 돌아 오면 이것을 시도 했습니까? 페이지를 아래로 스크롤하면 500PX라고 말합니다. 다른 페이지로 이동 한 다음 초기 페이지로 돌아갑니다. 일부 브라우저는 스크롤 위치를 유지하며 페이지를 다시 표시합니다. lastScrollTop0 에서 시작 하거나 제대로 초기화됩니까 ??
TCHdvlp

7
@TCHdvlp-최악의 시나리오 첫 번째 스크롤 이벤트는 변수를 업데이트하고 두 번째 이벤트는 정확합니다 (.. 뒤로 탐색 후 상향 스크롤에서만 중요합니다). var lastScrollTop = $(window).scrollTop()브라우저가 페이지로드시 스크롤 위치를 업데이트 한 후에 설정 하면 이 문제를 해결할 수 있습니다 .
Josiah Ruddell

2
이에 대한 업데이트 : 일부 브라우저, 특히 Windows 8의 IE 11에서는 스크롤 이벤트 하위 픽셀 기반 (매끄러운 스크롤)을 발생시킬 수 있습니다. 그러나 scrollTop을 정수로보고하기 때문에 이전 스크롤 값은 현재 스크롤 값과 동일 할 수 있습니다.
Renato

168

다른 모든 예제에서 요구하는 것처럼 이전 스크롤 상단을 추적하지 않고도 할 수 있습니다.

$(window).bind('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
        console.log('Scroll up');
    }
    else {
        console.log('Scroll down');
    }
});

나는 이것에 대한 전문가가 아니기 때문에 더 연구 해 주시기 바랍니다. 그러나를 사용할 때 $(element).scroll듣는 이벤트는 '스크롤'이벤트 인 것으로 보입니다 .

그러나 mousewheel바인드를 사용하여 이벤트 를 구체적으로 수신 하면originalEvent 콜백에 대한 이벤트 매개 변수 속성에 다른 정보가 포함됩니다. 그 정보의 일부는입니다 wheelDelta. 양수이면 마우스 휠을 위로 움직입니다. 음수이면 마우스 휠을 아래로 움직입니다.

내 생각 엔 mousewheel페이지가 스크롤되지 않더라도 마우스 휠이 돌아 가면 이벤트가 발생 한다는 것입니다. '스크롤'이벤트가 발생하지 않은 경우입니다. 원하는 경우 event.preventDefault()콜백 맨 아래에서 호출 하여 페이지가 스크롤되는 것을 방지하고 일부 유형의 확대 / 축소 기능과 같이 페이지 스크롤 이외의 항목에 마우스 휠 이벤트를 사용할 수 있습니다.


13
멋지지만 슬프게도 유일한 유일한 Firefox는 developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/… (FF v15에서 테스트)를 지원하지 않습니다 . : C
nuala

8
이것은 나에게 유용했습니다. 페이지 자체가 실제로 스크롤 scrollTop되지 않았지만 업데이트 되지 않았지만 스크롤을 감지해야했습니다 . 실제로, $(window).scroll()전혀 발사하지 않았다.
Martti Laine

13
이전 상태가 필요하지 않은 것이 좋습니다. 그러나이 기술은 마우스 휠이 없기 때문에 모바일 또는 태블릿에서는 작동하지 않습니다!
joeytwiddle 2013 년

13
키보드로 스크롤하면이 방법이 작동하지 않습니다. 그것은 줌과 같은 것들에 대한 흥미로운 접근 방식이지만 스크롤 방향 질문에 대해서는 생각하지 않습니다.
chmac

6
$ ( "html, body"). bind ({ 'mousewheel DOMMouseScroll onmousewheel touchmove scroll': function (e) {// ...}); 모든 브라우저 스크롤 데이터를 감지하는 데 도움이됩니다
GoreDefex

31

이전 스크롤 위치를 저장 한 다음 새 스크롤 위치가 그보다 크거나 작은 지 확인하십시오.

전역 변수를 피하는 방법은 다음과 같습니다 (여기에서 바이올린 사용 가능 ).

(function () {
    var previousScroll = 0;

    $(window).scroll(function(){
       var currentScroll = $(this).scrollTop();
       if (currentScroll > previousScroll){
           alert('down');
       } else {
          alert('up');
       }
       previousScroll = currentScroll;
    });
}()); //run this anonymous function immediately

29

기존 솔루션

이 게시물과 다른 답변 에서 3 가지 솔루션 이있을 수 있습니다 .

해결책 1

    var lastScrollTop = 0;
    $(window).on('scroll', function() {
        st = $(this).scrollTop();
        if(st < lastScrollTop) {
            console.log('up 1');
        }
        else {
            console.log('down 1');
        }
        lastScrollTop = st;
    });

해결책 2

    $('body').on('DOMMouseScroll', function(e){
        if(e.originalEvent.detail < 0) {
            console.log('up 2');
        }
        else {
            console.log('down 2');
        }
    });

해결책 3

    $('body').on('mousewheel', function(e){
        if(e.originalEvent.wheelDelta > 0) {
            console.log('up 3');
        }
        else {
            console.log('down 3');
        }
    });

멀티 브라우저 테스트

Safari에서 테스트하지 못했습니다.

크롬 42 (Win 7)

  • 해결책 1
    • 업 : 1 스크롤 당 1 이벤트
    • 아래로 : 1 스크롤 당 1 이벤트
  • 용제 2
    • Up : 작동하지 않습니다
    • 다운 : 작동하지 않습니다
  • 해결책 3
    • 업 : 1 스크롤 당 1 이벤트
    • 아래로 : 1 스크롤 당 1 이벤트

Firefox 37 (Win 7)

  • 해결책 1
    • 업 : 1 스크롤 당 20 이벤트
    • 다운 : 1 스크롤 당 20 개의 이벤트
  • 용제 2
    • Up : 작동하지 않습니다
    • 아래로 : 1 스크롤 당 1 이벤트
  • 해결책 3
    • Up : 작동하지 않습니다
    • 다운 : 작동하지 않습니다

IE 11 (Win 8)

  • 해결책 1
    • Up : 1 스크롤 당 10 개의 이벤트 (부작용 : 마지막으로 Down Scroll 발생)
    • 아래로 : 1 스크롤 당 10 개의 이벤트
  • 용제 2
    • Up : 작동하지 않습니다
    • 다운 : 작동하지 않습니다
  • 해결책 3
    • Up : 작동하지 않습니다
    • 아래로 : 1 스크롤 당 1 이벤트

IE 10 (Win 7)

  • 해결책 1
    • 업 : 1 스크롤 당 1 이벤트
    • 아래로 : 1 스크롤 당 1 이벤트
  • 용제 2
    • Up : 작동하지 않습니다
    • 다운 : 작동하지 않습니다
  • 해결책 3
    • 업 : 1 스크롤 당 1 이벤트
    • 아래로 : 1 스크롤 당 1 이벤트

IE 9 (Win 7)

  • 해결책 1
    • 업 : 1 스크롤 당 1 이벤트
    • 아래로 : 1 스크롤 당 1 이벤트
  • 용제 2
    • Up : 작동하지 않습니다
    • 다운 : 작동하지 않습니다
  • 해결책 3
    • 업 : 1 스크롤 당 1 이벤트
    • 아래로 : 1 스크롤 당 1 이벤트

IE 8 (Win 7)

  • 해결책 1
    • Up : 1 스크롤 당 2 개의 이벤트 (부작용 : 마지막으로 다운 스크롤이 발생 함)
    • 다운 : 1 스크롤 당 2 ~ 4 개의 이벤트
  • 용제 2
    • Up : 작동하지 않습니다
    • 다운 : 작동하지 않습니다
  • 해결책 3
    • 업 : 1 스크롤 당 1 이벤트
    • 아래로 : 1 스크롤 당 1 이벤트

결합 된 솔루션

IE 11 및 IE 8의 부작용이 if else진술 에서 나온 것임을 확인했습니다 . 그래서 if else if다음과 같이 진술로 대체했습니다 .

멀티 브라우저 테스트에서 일반 브라우저 에는 솔루션 3 을 , 파이어 폭스 및 IE 11에는 솔루션 1 을 사용하기로 결정했습니다 .

IE 11을 감지하기 위해이 답변 을 참조 했습니다 .

    // Detect IE version
    var iev=0;
    var ieold = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
    var trident = !!navigator.userAgent.match(/Trident\/7.0/);
    var rv=navigator.userAgent.indexOf("rv:11.0");

    if (ieold) iev=new Number(RegExp.$1);
    if (navigator.appVersion.indexOf("MSIE 10") != -1) iev=10;
    if (trident&&rv!=-1) iev=11;

    // Firefox or IE 11
    if(typeof InstallTrigger !== 'undefined' || iev == 11) {
        var lastScrollTop = 0;
        $(window).on('scroll', function() {
            st = $(this).scrollTop();
            if(st < lastScrollTop) {
                console.log('Up');
            }
            else if(st > lastScrollTop) {
                console.log('Down');
            }
            lastScrollTop = st;
        });
    }
    // Other browsers
    else {
        $('body').on('mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0) {
                console.log('Up');
            }
            else if(e.originalEvent.wheelDelta < 0) {
                console.log('Down');
            }
        });
    }

누군가의 결과를 추가 할 수 있으면 Safari browser솔루션을 보충하는 것이 도움이 될 것입니다.
화학 프로그래머

죄송합니다! 모바일 Chrome과 Android 기본 브라우저는 솔루션 1 만 다룹니다. 따라서 솔루션 1과 3을 함께 사용하여 다양한 브라우저를 다루는 것이 좋습니다.
화학 프로그래머

디자인이 고정 레이아웃 디자인 인 경우 작동하지 않습니다. 스크롤이없는 정적 웹 사이트에서 스크롤 방향을 감지하려면 Firefox와 IE11이 작동하지 않습니다.
Shannon Hochkins

나는 이것을 사용할 때 크롬의 "기타 브라우저"를 사용한다는 것을 알았습니다. 마우스 휠과 스크롤 막대로 스크롤을 감지하려고 할 때 실제로는 많이 사용되지 않습니다. .scroll은 크롬에서 두 가지 유형의 스크롤을 모두 감지합니다.
Sam

12

나는 이미 받아 들여진 대답이 있었지만 다른 사람을 도울 수 있도록 사용중인 것을 게시하고 싶다는 것을 알고 있습니다. cliphex마우스 휠 이벤트와 같은 방향 이지만 Firefox는 지원합니다. 잠금 스크롤과 같은 일을하고 현재 스크롤 상단을 가져올 수없는 경우이 방법으로 유용합니다.

여기 에서 라이브 버전을 참조 하십시오 .

$(window).on('mousewheel DOMMouseScroll', function (e) {

    var direction = (function () {

        var delta = (e.type === 'DOMMouseScroll' ?
                     e.originalEvent.detail * -40 :
                     e.originalEvent.wheelDelta);

        return delta > 0 ? 0 : 1;
    }());

    if(direction === 1) {
       // scroll down
    }
    if(direction === 0) {
       // scroll up
    }
});

@EtienneMartin 위의 코드는 jQuery에 의존하여 오류의 원인이됩니다. 첨부 된 바이올린이 작동하는지 확인하십시오.
익살스러운

8

스크롤 이벤트

스크롤 이벤트 이상한 FF에서 동작합니다 (이것은 때문에 스크롤 부드러움의 시간을 많이 해고) 만 작동합니다.

참고 : 스크롤 실제로 이벤트가 해고 스크롤 막대를 드래그 할 때 커서 키 또는 마우스 휠을 사용하여.

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "35px"
});

//binds the "scroll" event
$(window).scroll(function (e) {
    var target = e.currentTarget,
        self = $(target),
        scrollTop = window.pageYOffset || target.scrollTop,
        lastScrollTop = self.data("lastScrollTop") || 0,
        scrollHeight = target.scrollHeight || document.body.scrollHeight,
        scrollText = "";

    if (scrollTop > lastScrollTop) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    $("#test").html(scrollText +
      "<br>innerHeight: " + self.innerHeight() +
      "<br>scrollHeight: " + scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>lastScrollTop: " + lastScrollTop);

    if (scrollHeight - scrollTop === self.innerHeight()) {
      console.log("► End of scroll");
    }

    //saves the current scrollTop
    self.data("lastScrollTop", scrollTop);
});

휠 이벤트

또한 MDN을 살펴볼 수 있으며 휠 이벤트 에 대한 유용한 정보를 제공합니다 .

참고 : 휠 이벤트 는 마우스 휠을 사용할 때만 발생합니다 . 커서 키와 스크롤 막대를 드래그해도 이벤트가 발생하지 않습니다.

나는 문서와 예제를 읽었습니다 : 브라우저를 통해이 이벤트를 듣고
FF, IE, chrome, safari로 테스트 한 후이 스 니펫으로 끝났습니다.

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "15px"
});

//attach the "wheel" event if it is supported, otherwise "mousewheel" event is used
$("html").on(("onwheel" in document.createElement("div") ? "wheel" : "mousewheel"), function (e) {
    var evt = e.originalEvent || e;

    //this is what really matters
    var deltaY = evt.deltaY || (-1 / 40 * evt.wheelDelta), //wheel || mousewheel
        scrollTop = $(this).scrollTop() || $("body").scrollTop(), //fix safari
        scrollText = "";

    if (deltaY > 0) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    //console.log("Event: ", evt);
    $("#test").html(scrollText +
      "<br>clientHeight: " + this.clientHeight +
      "<br>scrollHeight: " + this.scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>deltaY: " + deltaY);
});

2
실제 스크롤 막대를 비활성화하는 고정 패널보기가 있으므로 마우스 휠의 방향을 감지해야했습니다. 마우스 휠 솔루션은 브라우저 간 완벽하게 작동하므로 감사합니다!
Shannon Hochkins

8

포인터 장치 (마우스 또는 트랙 패드)를 사용하여 위 또는 아래로 스크롤하는지 알고 싶은 경우 이벤트 의 deltaY 속성을 사용할 수 있습니다 wheel.

$('.container').on('wheel', function(event) {
  if (event.originalEvent.deltaY > 0) {
    $('.result').append('Scrolled down!<br>');
  } else {
    $('.result').append('Scrolled up!<br>');
  }
});
.container {
  height: 200px;
  width: 400px;
  margin: 20px;
  border: 1px solid black;
  overflow-y: auto;
}
.content {
  height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="content">
    Scroll me!
  </div>
</div>

<div class="result">
  <p>Action:</p>
</div>



3
var tempScrollTop, currentScrollTop = 0; 

$(window).scroll(function(){ 

   currentScrollTop = $("#div").scrollTop(); 

   if (tempScrollTop > currentScrollTop ) {
       // upscroll code
   }
  else if (tempScrollTop < currentScrollTop ){
      // downscroll code
  }

  tempScrollTop = currentScrollTop; 
} 

또는 마우스 휠 확장을 사용 하십시오 ( 여기 참조) .


3

나는 여기에 좋은 답변의 많은 버전을 보았지만 일부 사람들은 브라우저 간 문제가있는 것처럼 보이므로 이것이 내 해결책입니다.

나는 이것을 FF, IE 및 Chrome에서 방향을 감지하는 데 성공적으로 사용했습니다 ... 창을 일반적으로 사용하기 때문에 사파리에서 테스트하지 않았습니다.

$("html, body").bind({'mousewheel DOMMouseScroll onmousewheel touchmove scroll': 
    function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();

        //Determine Direction
        if (e.originalEvent.wheelDelta && e.originalEvent.wheelDelta >= 0) {
            //Up
            alert("up");

        } else if (e.originalEvent.detail && e.originalEvent.detail <= 0) {
            //Up
            alert("up");

        } else {
            //Down
            alert("down");
        }
    }
});

나는 또한 스크롤을 멈추기 위해 이것을 사용하므로 스크롤이 계속 일어나기를 원한다면 e.preventDefault(); e.stopPropagation();


1
Android GS5에서 항상 다운 됨
SISYN

이것은 훌륭하게 작동했습니다! IE에서 가장 많이 투표 된 답변에 문제가있었습니다. 이것은 그 문제가 없습니다! 나에게서 +1
Radmation

3

페이지 상단과 하단에있는 스냅 / 모멘텀 / 바운스를 무시하기 위해 다음은 수정 된 버전의 요시야의 대답입니다 .

var prevScrollTop = 0;
$(window).scroll(function(event){

    var scrollTop = $(this).scrollTop();

    if ( scrollTop < 0 ) {
        scrollTop = 0;
    }
    if ( scrollTop > $('body').height() - $(window).height() ) {
        scrollTop = $('body').height() - $(window).height();
    }

    if (scrollTop >= prevScrollTop && scrollTop) {
        // scrolling down
    } else {
        // scrolling up
    }

    prevScrollTop = scrollTop;
});

3

mousewhell 방향을 결정할 수 있습니다.

$(window).on('mousewheel DOMMouseScroll', function (e) {
    var delta = e.originalEvent.wheelDelta ? 
                   e.originalEvent.wheelDelta : -e.originalEvent.detail;

    if (delta >= 0) {
        console.log('scroll up');
    } else {
        console.log('scroll down');
    }
});

3

이것을 사용하여 스크롤 방향을 찾으십시오. 이것은 세로 스크롤의 방향을 찾기위한 것입니다. 모든 크로스 브라우저를 지원합니다.

    var scrollableElement = document.getElementById('scrollableElement');

    scrollableElement.addEventListener('wheel', findScrollDirectionOtherBrowsers);

    function findScrollDirectionOtherBrowsers(event){
        var delta;

        if (event.wheelDelta){
            delta = event.wheelDelta;
        }else{
            delta = -1 * event.deltaY;
        }

        if (delta < 0){
            console.log("DOWN");
        }else if (delta > 0){
            console.log("UP");
        }

    }


3

이 코드는 IE, Firefox, Opera 및 Chrome에서 잘 작동합니다.

$(window).bind('wheel mousewheel', function(event) {
      if (event.originalEvent.deltaY >= 0) {
          console.log('Scroll down');
      }
      else {
          console.log('Scroll up');
      }
  });

'wheel mousewheel'deltaY 속성 은 bind () 함수 에서 사용해야 합니다.

알아두기 : 보안상의 이유로 사용자는 시스템과 브라우저를 업데이트해야합니다. 2018 년에 "I have IE 7"의 변명은 의미가 없습니다. 우리는 사용자를 교육해야합니다.

좋은 하루 되세요 :)


1
나는 당신의 코드를 시도했고 다른 방법입니다. 첫 번째는 아래로 스크롤 할 때 트리거되고 두 번째는 아래로 스크롤 할 때 트리거됩니다.
AlexioVay

안녕하세요 :) 감사합니다 AlexioVay. 내 코드를 편집했습니다 (시간도!) ^^. 물론 "console.log ( '.......')"는 우리가 할 수있는 일의 예일뿐입니다.
Cyril Morales

2

매우 간단하게 유지하십시오.

jQuery 이벤트 리스너 방법 :

$(window).on('wheel', function(){
  whichDirection(event);
});

바닐라 JavaScript 이벤트 리스너 방법 :

if(window.addEventListener){
  addEventListener('wheel', whichDirection, false);
} else if (window.attachEvent) {
  attachEvent('wheel', whichDirection, false);
}

기능은 동일하게 유지됩니다.

function whichDirection(event){
  console.log(event + ' WheelEvent has all kinds of good stuff to work with');
  var scrollDirection = event.deltaY;
  if(scrollDirection === 1){
    console.log('meet me at the club, going down', scrollDirection);
  } else if(scrollDirection === -1) {
    console.log('Going up, on a tuesday', scrollDirection);
  }
}

나는 그것을 더 심층적으로 다룬 게시물을 작성한 사람 여기


jquery 버전을 사용하려면 jquery-wheel이 필요합니까?
Hastig Zusammenstellen

1
JQuery와 휠이 @HastigZusammenstellen 필요하지 않습니다
CR Rollyson에게

2

스크롤 및 마우스 휠 옵션을 모두 사용하여 한 번에 위아래로 움직임을 추적 할 수 있습니다.

 $('body').bind('scroll mousewheel', function(event) {

if (event.originalEvent.wheelDelta >= 0) {
      console.log('moving down');   
    }
    else {
      console.log('moving up'); 
    }
});

'body'를 (window)로 바꿀 수도 있습니다.


Chrome에서는 제대로 작동하지만 FF (55.0.2, 우분투)에서는 작동하지 않는
것으로 보입니다

1

.data ()스크롤 된 요소 의 증분을 스크롤하면 스크롤이 맨 위에 도달 한 횟수를 테스트 할 수 있습니다.


1

왜 아무도 스크롤 할 때 event반환 된 객체를 사용하지 jQuery않습니까?

$window.on('scroll', function (event) {
    console.group('Scroll');
    console.info('Scroll event:', event);
    console.info('Position:', this.pageYOffset);
    console.info('Direction:', event.originalEvent.dir); // Here is the direction
    console.groupEnd();
});

사용 chromium중이며 dir속성 이 있으면 다른 브라우저에서 확인하지 않았습니다 .


1

v3 bind에서 더 이상 사용되지 않아 ( "대체 됨 on") wheel이제 지원 되므로 다음 잊어 버리십시오 wheelDelta.

$(window).on('wheel', function(e) {
  if (e.originalEvent.deltaY > 0) {
    console.log('down');
  } else {
    console.log('up');
  }
  if (e.originalEvent.deltaX > 0) {
    console.log('right');
  } else {
    console.log('left');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 style="white-space:nowrap;overflow:scroll">
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
</h1>

wheelMDN의 이벤트 브라우저 호환성 (2019-03-18) :

휠 이벤트의 호환성


위의 코드는 두 개의 콘솔 로그를 생성합니다. 다음을 사용하여 위 / 아래 / 왼쪽 / 오른쪽을 완전히 분리하십시오. if(e.originalEvent.deltaY > 0) { console.log('down'); } else if(e.originalEvent.deltaY < 0) { console.log('up'); } else if(e.originalEvent.deltaX > 0) { console.log('right'); } else if(e.originalEvent.deltaX < 0) { console.log('left'); }
Don Wilson

touchmove대신 모바일 사용 이벤트의 경우.
CPHPython

1

이것도 사용할 수 있습니다

$(document).ready(function(){

  var currentscroll_position = $(window).scrollTop();
$(window).on('scroll', function(){
Get_page_scroll_direction();
});

function Get_page_scroll_direction(){
  var running_scroll_position = $(window).scrollTop();
  if(running_scroll_position > currentscroll_position) {
      
      $('.direction_value').text('Scrolling Down Scripts');

  } else {
       
       $('.direction_value').text('Scrolling Up Scripts');

  }
  currentscroll_position = running_scroll_position;
}

});
.direction_value{
  position: fixed;
  height: 30px;
  background-color: #333;
  color: #fff;
  text-align: center;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="direction_value">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>


0

.data()요소 에서 이벤트를 시작하기 위해 JSON 및 테스트 값을 저장할 수 있습니다.

{ top : 1,
   first_top_event: function(){ ...},
   second_top_event: function(){ ...},
   third_top_event: function(){ ...},
   scroll_down_event1: function(){ ...},
   scroll_down_event2: function(){ ...}
}

0

이것은 사용자가 페이지 상단에서 스크롤하여 맨 위로 돌아올 때 간단하고 쉽게 감지 할 수 있습니다.

$(window).scroll(function() {
    if($(window).scrollTop() > 0) {
        // User has scrolled
    } else {
        // User at top of page
    }
});

0

사용자가 스크롤을 끝낼 때 방향을 감지하기위한 최적의 솔루션입니다.

var currentScrollTop = 0 ;

$(window).bind('scroll', function () {     

    scrollTop = $(this).scrollTop();

    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {

        if(scrollTop > currentScrollTop){
            // downscroll code
            $('.mfb-component--bl').addClass('mfbHide');
        }else{
            // upscroll code
            $('.mfb-component--bl').removeClass('mfbHide');
        }
        currentScrollTop = scrollTop;

    }, 250));

});

0

당신은 이것을 시도해야

var scrl
$(window).scroll(function(){
        if($(window).scrollTop() < scrl){
            //some code while previous scroll
        }else{
            if($(window).scrollTop() > 200){
                //scroll while downward
            }else{//scroll while downward after some specific height
            }
        }
        scrl = $(window).scrollTop();
    });

0

탄성 스크롤 (스크롤 수신 거부, 고무 밴딩)에 문제 가 있었습니다 . 페이지 상단에 가까운 경우 다운 스크롤 이벤트를 무시하면 효과가 있습니다.

var position = $(window).scrollTop();
$(window).scroll(function () {
    var scroll = $(window).scrollTop();
    var downScroll = scroll > position;
    var closeToTop = -120 < scroll && scroll < 120;
    if (downScroll && !closeToTop) {
        // scrolled down and not to close to top (to avoid Ipad elastic scroll-problems)
        $('.top-container').slideUp('fast');
        $('.main-header').addClass('padding-top');
    } else {
        // scrolled up
        $('.top-container').slideDown('fast');
        $('.main-header').removeClass('padding-top');
    }
    position = scroll;
});

0

이것은 모든 PC 또는 전화 브라우저에서 작동하며 최고의 답변으로 확장됩니다. 더 복잡한 이벤트 객체 창 [ "scroll_evt"]을 구축 한 다음 handleScroll () 함수에서 호출 할 수 있습니다. 특정 지연이 경과하거나 원하지 않는 트리거를 제거하기 위해 특정 델타가 전달되는 경우 2 개의 동시 조건이 트리거됩니다.

window["scroll_evt"]={"delta":0,"delay":0,"direction":0,"time":Date.now(),"pos":$(window).scrollTop(),"min_delta":120,"min_delay":10};
$(window).scroll(function() {

    var currentScroll = $(this).scrollTop();
    var currentTime = Date.now();
    var boolRun=(window["scroll_evt"]["min_delay"]>0)?(Math.abs(currentTime - window["scroll_evt"]["time"])>window["scroll_evt"]["min_delay"]):false;
    boolRun = boolRun && ((window["scroll_evt"]["min_delta"]>0)?(Math.abs(currentScroll - window["scroll_evt"]["pos"])>window["scroll_evt"]["min_delta"]):false);
    if(boolRun){
        window["scroll_evt"]["delta"] = currentScroll - window["scroll_evt"]["pos"];
        window["scroll_evt"]["direction"] = window["scroll_evt"]["delta"]>0?'down':'up';
        window["scroll_evt"]["delay"] =currentTime - window["scroll_evt"]["time"];//in milisecs!!!
        window["scroll_evt"]["pos"] = currentScroll;
        window["scroll_evt"]["time"] = currentTime;
        handleScroll();
    }
});


function handleScroll(){
    event.stopPropagation();
    //alert(window["scroll_evt"]["direction"]);
    console.log(window["scroll_evt"]);
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.