스크롤 방향 감지


119

그래서 JavaScript on scroll를 사용하여 함수를 호출하려고합니다. 하지만 jQuery를 사용하지 않고 스크롤 방향을 감지 할 수 있는지 알고 싶었습니다. 그렇지 않은 경우 해결 방법이 있습니까?

나는 단지 '위로'버튼을 넣는 것을 생각하고 있었지만 가능하다면 그것을 피하고 싶습니다.

이제이 코드를 사용해 보았지만 작동하지 않았습니다.

if document.body.scrollTop <= 0 {
    alert ("scrolling down")
} else {
    alert ("scrolling up")
}

그것은의 wheelDelta이벤트. 크로스 브라우저가 아닙니다. 참조 phrogz.net/js/wheeldelta.html
marekful

1
흠 내가 찾던 내용은 아니지만 도움을 주셔서 감사합니다. : P 다른 제안이 있습니까?
dwinnbrown

답변:


176

이전 scrollTop값 을 저장 하고 현재 scrollTop 값과 비교하여 감지 할 수 있습니다 .

자바 스크립트 :

var lastScrollTop = 0;

// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
element.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
   var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
   if (st > lastScrollTop){
      // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);

20
lastScrollToppageYOffset 으로 초기화 하는 것이 더 안전 할 것입니다 || scrollTop이 아니라 0 가정보다
에드 투표 용지를

전적으로 동의합니다 !! 감사합니다 @EdBallot. window.onload 이벤트에서 동일하게 초기화해야합니다.
Prateek

@Prateek 귀하의 답변에 감사드립니다. 그러나 그것은 나를 위해 작동하지 않습니다 ... 나는 Tumult Hype를 사용하여 구축 된 내 웹 앱에서 '장면 변경'을 시도하고 있습니다.
dwinnbrown

내 답변에 몇 가지 의견을 추가했습니다. 확인하십시오. "element.addEventListener"를 사용하고있는 것 같습니다.
Prateek

@Prateek 아직도 아무것도 두려워하지 않습니다. 페이지로드시 실행하고 있다는 사실과 관련이있을 수 있습니까? 다음은 스크린 샷입니다 : i.imgur.com/Q0H0T4s.png
dwinnbrown

53

모든 스크롤 이벤트를 잡는 간단한 방법 (터치 및 휠)

window.onscroll = function(e) {
  // print "false" if direction is down and "true" if up
  console.log(this.oldScroll > this.scrollY);
  this.oldScroll = this.scrollY;
}

10
SO에 오신 것을 환영합니다. 답변에 설명을 추가하면 OP와 다른 사람들에게 더 도움이 될 수 있습니다.
Alejandro Montilla

32

스크롤 방향을 찾는 데 사용합니다. 세로 스크롤의 방향을 찾기위한 것입니다. 모든 크로스 브라우저를 지원합니다.

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

scrollableElement.addEventListener('wheel', checkScrollDirection);

function checkScrollDirection(event) {
  if (checkScrollDirectionIsUp(event)) {
    console.log('UP');
  } else {
    console.log('Down');
  }
}

function checkScrollDirectionIsUp(event) {
  if (event.wheelDelta) {
    return event.wheelDelta > 0;
  }
  return event.deltaY < 0;
}


2
이것은 좋은,하지만 스크롤 휠을 사용하기위한 작동하는 것 같다
Jonathan.Brink

1
MDN 웹 문서에서 : 참고 : 휠 이벤트와 스크롤 이벤트를 혼동하지 마십시오. 휠 이벤트의 기본 동작은 구현에 따라 다르며 반드시 scroll 이벤트를 전달하는 것은 아닙니다. 그렇더라도 wheel 이벤트의 delta * 값은 콘텐츠의 스크롤 방향을 반드시 반영하지는 않습니다. 따라서 스크롤 방향을 얻기 위해 휠 이벤트의 delta * 속성에 의존하지 마십시오. 대신 scroll 이벤트에서 대상의 scrollLeft 및 scrollTop 값 변경을 감지하십시오. developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event
battaboombattabaam

10

이것을 시도 할 수 있습니다.

function scrollDetect(){
  var lastScroll = 0;

  window.onscroll = function() {
      let currentScroll = document.documentElement.scrollTop || document.body.scrollTop; // Get Current Scroll Value

      if (currentScroll > 0 && lastScroll <= currentScroll){
        lastScroll = currentScroll;
        document.getElementById("scrollLoc").innerHTML = "Scrolling DOWN";
      }else{
        lastScroll = currentScroll;
        document.getElementById("scrollLoc").innerHTML = "Scrolling UP";
      }
  };
}


scrollDetect();
html,body{
  height:100%;
  width:100%;
  margin:0;
  padding:0;
}

.cont{
  height:100%;
  width:100%;
}

.item{
  margin:0;
  padding:0;
  height:100%;
  width:100%;
  background: #ffad33;
}

.red{
  background: red;
}

p{
  position:fixed;
  font-size:25px;
  top:5%;
  left:5%;
}
<div class="cont">
  <div class="item"></div>
  <div class="item red"></div>
  <p id="scrollLoc">0</p>
</div>


이것은 나를 위해 잘 작동하지 않습니다. 특정 높이까지 위로 스크롤하면 아래로 표시됩니다.
Developer

8

이것은 prateek이 대답 한 내용에 추가 된 것입니다. IE의 코드에 결함이있는 것 같아서 약간 멋지게 수정하기로 결정했습니다 (다른 조건)

$('document').ready(function() {
var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       console.log("down")
   }
   else if(st == lastScrollTop)
   {
     //do nothing 
     //In IE this is an important condition because there seems to be some instances where the last scrollTop is equal to the new one
   }
   else {
      console.log("up")
   }
   lastScrollTop = st;
});});

1
힌트 주셔서 감사 ...이 IE에 연결되어있는 것 같다 "옵션 스크롤 부드러운"
크리스토

5
  1. oldValue 초기화
  2. 이벤트를 수신하여 newValue 가져 오기
  3. 둘 빼기
  4. 결과에서 결론
  5. newValue로 oldValue 업데이트

// 초기화

let oldValue = 0;

// 이벤트 청취

window.addEventListener('scroll', function(e){

    // Get the new Value
    newValue = window.pageYOffset;

    //Subtract the two and conclude
    if(oldValue - newValue < 0){
        console.log("Up");
    } else if(oldValue - newValue > 0){
        console.log("Down");
    }

    // Update the old value
    oldValue = newValue;
});

3

을 사용하여 스크롤바 위치를 얻을 수 있습니다 document.documentElement.scrollTop. 그리고 그것은 단순히 이전 위치와 비교하는 것입니다.


확인을 나는 아직도 전통적으로 스크롤을 허용하지 않는 웹 사이트에이를 사용할 수 있습니다 (즉, 그것은 브라우저 100 % 너비와 높이에 맞는 감사합니다.
dwinnbrown

2

이 간단한 코드는 작동합니다. 콘솔에서 결과를 확인하십시오.

let scroll_position = 0;
let scroll_direction;

window.addEventListener('scroll', function(e){
    scroll_direction = (document.body.getBoundingClientRect()).top > scroll_position ? 'up' : 'down';
    scroll_position = (document.body.getBoundingClientRect()).top;
    console.log(scroll_direction);
});

1

개인적으로이 코드를 사용하여 자바 스크립트에서 스크롤 방향을 감지합니다 ... lastscrollvalue를 저장할 변수를 정의한 다음이 if & else를 사용하면됩니다.

let lastscrollvalue;

function headeronscroll() {

    // document on which scroll event will occur
    var a = document.querySelector('.refcontainer'); 

    if (lastscrollvalue == undefined) {

        lastscrollvalue = a.scrollTop;

        // sets lastscrollvalue
    } else if (a.scrollTop > lastscrollvalue) {

        // downscroll rules will be here
        lastscrollvalue = a.scrollTop;

    } else if (a.scrollTop < lastscrollvalue) {

        // upscroll rules will be here
        lastscrollvalue = a.scrollTop;

    }
}

0

간단한 코드

// Events
$(document).on('mousewheel DOMMouseScroll', "element", function(e) {
    let delta = e.originalEvent.wheelDelta;
    
    if (delta > 0 || e.originalEvent.detail < 0) upScrollFunction();
    if (delta < 0 || e.originalEvent.detail > 0) donwScrollFunction();
}

이 코드가 질문에 답할 수 있지만 문제를 해결하는 방법 및 / 또는 이유에 대한 추가 컨텍스트를 제공하면 답변의 장기적인 가치가 향상됩니다.
Donald Duck
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.