Wykrywanie kierunku przewijania


120

Więc próbuję użyć JavaScript on scrolldo wywołania funkcji. Ale chciałem wiedzieć, czy mogę wykryć kierunek przewijania bez użycia jQuery. Jeśli nie, to czy są jakieś obejścia?

Myślałem o umieszczeniu przycisku „do góry”, ale chciałbym tego uniknąć, gdybym mógł.

Właśnie próbowałem użyć tego kodu, ale to nie zadziałało:

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

To jest wheelDeltawydarzenie. Całkiem nie cross-browser. Zobacz phrogz.net/js/wheeldelta.html
marekful

1
hmmm nie do końca to czego szukałem ale doceniam twoją pomoc: P Jakieś inne sugestie?
dwinnbrown

Odpowiedzi:


177

Można to wykryć, przechowując poprzednią scrollTopwartość i porównując z nią bieżącą wartość scrollTop.

JavaScript:

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
Byłoby bezpieczniej zainicjować lastScrollToppageYOffset || scrollTop zamiast zakładać 0
Ed Ballot

Kompletnie się zgadzam !! Dzięki @ EdBallot. Powinniśmy zainicjować to samo na zdarzeniu window.onload.
Prateek

@Prateek Dziękuję za odpowiedź, ale to nie działa dla mnie ... Próbuję „zmienić scenę” w mojej aplikacji internetowej, która jest zbudowana przy użyciu Tumult Hype.
dwinnbrown

Dodałem kilka komentarzy do mojej odpowiedzi, sprawdź to. Domyślam się, że używasz elementu „element.addEventListener”.
Prateek

@Prateek nadal nic się nie boję. Czy może to mieć związek z tym, że uruchamiam go podczas ładowania strony? Oto zrzut ekranu: i.imgur.com/Q0H0T4s.png
dwinnbrown

53

Prosty sposób na złapanie wszystkich zdarzeń przewijania (dotyk i kółko)

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
Witamy w SO, jeśli dodasz opis do swojej odpowiedzi, może to być bardziej pomocne dla PO i innych osób.
Alejandro Montilla

32

Użyj tego, aby znaleźć kierunek przewijania. To tylko po to, aby znaleźć kierunek pionowego zwoju. Obsługuje wszystkie przeglądarki internetowe.

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

Przykład


2
To dobrze, ale wydaje się, że działa tylko przy używaniu kółka przewijania
Jonathan.Brink

1
Z MDN webdocs: Uwaga: Nie myl zdarzenia wheel ze zdarzeniem scroll. Domyślna akcja zdarzenia koła jest specyficzna dla implementacji i niekoniecznie wywołuje zdarzenie przewijania. Nawet jeśli tak się dzieje, wartości delta * w zdarzeniu koła niekoniecznie odzwierciedlają kierunek przewijania zawartości. Dlatego nie należy polegać na właściwościach delta * zdarzenia koła, aby uzyskać kierunek przewijania. Zamiast tego wykryj zmiany wartości scrollLeft i scrollTop celu w zdarzeniu scroll. developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event
battaboombattabaam

10

Możesz spróbować to zrobić.

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>


to nie działa dobrze dla mnie. Kiedy przewijam w górę nawet do pewnej wysokości, pokazuje się
programista

8

To jest dodatek do tego, na co odpowiedział prateek, wygląda na to, że w kodzie w IE jest usterka, więc postanowiłem go trochę zmodyfikować, nic nadzwyczajnego (tylko inny warunek)

$('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
Dziękuję za wskazówkę… wydaje się, że jest to połączone z opcją „Płynne przewijanie” w IE
Kristo

5
  1. Zainicjuj oldValue
  2. Uzyskaj nową wartość, słuchając zdarzenia
  3. Odejmij te dwa
  4. Wnioski z wyniku
  5. Zaktualizuj oldValue nową wartością

// Inicjalizacja

let oldValue = 0;

// Słucham wydarzenia

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

Możesz uzyskać położenie paska przewijania za pomocą document.documentElement.scrollTop. A potem jest po prostu kwestia porównania go z poprzednią pozycją.


Ok i czy mógłbym nadal używać tego na stronie, która tradycyjnie nie pozwala na przewijanie (tzn. Pasuje do przeglądarki w 100% szerokości i wysokości. Dzięki
dwinnbrown

2

Ten prosty kod działałby: Sprawdź wyniki w konsoli.

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

Osobiście używam tego kodu do wykrywania kierunku przewijania w javascript ... Po prostu musisz zdefiniować zmienną do przechowywania lastscrollvalue, a następnie użyć tego 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

Prosty kod

// 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();
}

Chociaż ten kod może odpowiedzieć na pytanie, dostarczenie dodatkowego kontekstu dotyczącego tego, jak i / lub dlaczego rozwiązuje problem, poprawiłoby długoterminową wartość odpowiedzi.
Kaczor Donald
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.