Jak mogę określić kierunek zdarzenia przewijania jQuery?

344

Szukam czegoś do tego efektu:

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

Jakieś pomysły?

Zach
źródło
Jeśli masz problemy z elastycznym przewijaniem, skorzystaj z tej odpowiedzi stackoverflow.com/questions/7154967/jquery-detect-scrolldown
Timothy Dalton
1
Najłatwiejsze do wykorzystania w wheeldzisiejszych czasach: stackoverflow.com/a/33334461/3168107 .
Shikkediel

Odpowiedzi:

699

Sprawdź aktualny scrollTopvs poprzedniscrollTop

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});
Josiah Ruddell
źródło
16
Jakiś sposób ustawić na to sensowność?
koder kakao
8
Zrobiłem przykład na tym codepen. Może zaktualizuję tę odpowiedź za pomocą wtyczki jQuery ze względu na popularność.
Josiah Ruddell
3
Czy próbowałeś tego, jeśli wrócisz na poprzednią stronę z tym kodem? Jeśli przewiniesz stronę, powiedzmy 500PX. Przejdź do innej strony, a następnie z powrotem do strony początkowej. Niektóre przeglądarki utrzymują pozycję przewijania i prowadzą z powrotem na dół strony. Czy masz wartość początkową lastScrollTopod 0, czy będzie ona poprawnie zainicjowana?
TCHdvlp
7
@TCHdvlp - najgorszy scenariusz: pierwsze zdarzenie przewijania zaktualizuje zmienną, a drugie zdarzenie będzie dokładne (.. to będzie miało znaczenie tylko w przypadku przewijania w górę po nawigacji wstecz). Można to naprawić, ustawiając var lastScrollTop = $(window).scrollTop()po tym, jak przeglądarka zaktualizuje pozycję przewijania przy ładowaniu strony.
Josiah Ruddell,
2
Aktualizacja na ten temat: Uważaj, aby niektóre przeglądarki, szczególnie IE 11 w systemie Windows 8, mogły uruchamiać zdarzenia przewijania oparte na subpikselach (płynne przewijanie). Ale ponieważ zgłasza scrollTop jako liczbę całkowitą, poprzednia wartość przewijania może być taka sama jak bieżąca.
Renato,
168

Możesz to zrobić bez konieczności śledzenia poprzedniego przewijania u góry, ponieważ wszystkie pozostałe przykłady wymagają:

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

Nie jestem ekspertem w tej dziedzinie, więc zachęcamy do dalszych badań, ale wygląda na to, że kiedy używasz $(element).scroll, słuchane zdarzenie jest wydarzeniem „przewijanym”.

Ale jeśli konkretnie nasłuchujesz mousewheelzdarzenia za pomocą powiązania, originalEventatrybut parametru zdarzenia wywołania zwrotnego zawiera inne informacje. Część tych informacji to wheelDelta. Jeśli jest dodatni, przesunąłeś kółko myszy w górę. Jeśli jest ujemny, przesunąłeś kółko myszy w dół.

Domyślam się, że mousewheelzdarzenia będą się uruchamiać, gdy kółko myszy się obraca, nawet jeśli strona się nie przewija; przypadek, w którym zdarzenia „przewijania” prawdopodobnie nie są uruchamiane. Jeśli chcesz, możesz zadzwonić event.preventDefault()w dolnej części oddzwaniania, aby zapobiec przewijaniu strony, a także użyć zdarzenia kółka myszy do przewijania strony innego niż przewijanie strony, na przykład funkcji powiększania.

cilphex
źródło
13
Fajnie, ale niestety jedyny Firefox nie obsługuje go developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/… (testowany w FF 15). : C
nuala
8
Przydało mi się to: musiałem wykryć przewijanie, mimo że sama strona nie przewinęła się, więc scrollTopnie zaktualizowałem. Tak naprawdę $(window).scroll()wcale nie strzelał.
Martti Laine,
13
Fajnie, że nie potrzebujesz starego stanu. Jednak ta technika nie będzie działać na telefonach komórkowych i tabletach, ponieważ nie mają kółka myszy!
joeytwiddle
13
To podejście nie zadziała, jeśli przewijam za pomocą klawiatury. To zdecydowanie interesujące podejście do takich rzeczy jak zoom, ale nie sądzę, że odnosi się do pytania o kierunek przewijania.
chmac
6
$ ("html, body"). bind ({'kółko myszy DOMMouseScroll onmousewheel touchmove scroll': function (e) {// ...}); działa dla mnie w wykrywaniu wszystkich danych przewijania przeglądarki
GoreDefex
31

Zapisz poprzednią lokalizację przewijania, a następnie sprawdź, czy nowa jest większa czy mniejsza.

Oto sposób na uniknięcie zmiennych globalnych ( skrzypce dostępne tutaj ):

(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
Skilldrick
źródło
29

Istniejące rozwiązanie

Mogą być 3 rozwiązania z tego postu i innej odpowiedzi .

Rozwiązanie 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;
    });

Rozwiązanie 2

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

Rozwiązanie 3

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

Test wielu przeglądarek

Nie mogłem przetestować tego na Safari

chrom 42 (Win 7)

  • Rozwiązanie 1
    • W górę: 1 zdarzenie na 1 zwój
    • W dół: 1 zdarzenie na 1 zwój
  • Rozwiązanie 2
    • W górę: nie działa
    • W dół: nie działa
  • Rozwiązanie 3
    • W górę: 1 zdarzenie na 1 zwój
    • W dół: 1 zdarzenie na 1 zwój

Firefox 37 (Win 7)

  • Rozwiązanie 1
    • Do góry: 20 zdarzeń na 1 zwój
    • W dół: 20 zdarzeń na 1 zwój
  • Rozwiązanie 2
    • W górę: nie działa
    • W dół: 1 zdarzenie na 1 zwój
  • Rozwiązanie 3
    • W górę: nie działa
    • W dół: nie działa

IE 11 (Win 8)

  • Rozwiązanie 1
    • W górę: 10 zdarzeń na 1 zwój (efekt uboczny: w końcu wystąpiło przewijanie w dół)
    • W dół: 10 zdarzeń na 1 zwój
  • Rozwiązanie 2
    • W górę: nie działa
    • W dół: nie działa
  • Rozwiązanie 3
    • W górę: nie działa
    • W dół: 1 zdarzenie na 1 zwój

IE 10 (Win 7)

  • Rozwiązanie 1
    • W górę: 1 zdarzenie na 1 zwój
    • W dół: 1 zdarzenie na 1 zwój
  • Rozwiązanie 2
    • W górę: nie działa
    • W dół: nie działa
  • Rozwiązanie 3
    • W górę: 1 zdarzenie na 1 zwój
    • W dół: 1 zdarzenie na 1 zwój

IE 9 (Win 7)

  • Rozwiązanie 1
    • W górę: 1 zdarzenie na 1 zwój
    • W dół: 1 zdarzenie na 1 zwój
  • Rozwiązanie 2
    • W górę: nie działa
    • W dół: nie działa
  • Rozwiązanie 3
    • W górę: 1 zdarzenie na 1 zwój
    • W dół: 1 zdarzenie na 1 zwój

IE 8 (Win 7)

  • Rozwiązanie 1
    • W górę: 2 zdarzenia na 1 zwój (efekt uboczny: w końcu wystąpiło przewijanie w dół)
    • W dół: 2 ~ 4 zdarzenia na 1 zwój
  • Rozwiązanie 2
    • W górę: nie działa
    • W dół: nie działa
  • Rozwiązanie 3
    • W górę: 1 zdarzenie na 1 zwój
    • W dół: 1 zdarzenie na 1 zwój

Połączone rozwiązanie

Sprawdziłem, czy efekt uboczny z IE 11 i IE 8 pochodzi z if elseinstrukcji. Tak więc zastąpiłem go if else ifnastępującym stwierdzeniem.

W teście z wieloma przeglądarkami zdecydowałem się użyć rozwiązania 3 dla popularnych przeglądarek i rozwiązania 1 dla Firefoxa i IE 11.

Odniosłem się do tej odpowiedzi, aby wykryć 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');
            }
        });
    }
Programator chemiczny
źródło
Gdyby ktoś mógł dodać wynik Safari browser, pomocne byłoby uzupełnienie rozwiązania.
Programista chemiczny
Ups! Przekonałem się, że domyślna przeglądarka Mobile Chrome i Android jest objęta tylko rozwiązaniem 1. Dlatego lepiej byłoby używać zarówno rozwiązania 1, jak i 3 razem, aby obejmować różne przeglądarki.
programista chemiczny
Nie będzie działać, jeśli projekt ma ustalony układ. Jeśli chcesz wykryć kierunek przewijania w statycznej witrynie bez przewijania, Firefox i IE11 nie będą działać
Shannon Hochkins,
Zauważyłem, że kiedy go używam, używa „Innych przeglądarek” w chromie, to nie jest tak bardzo przydatne, gdy chcesz wykryć przewijanie za pomocą kółka myszy i paska przewijania. .scroll wykryje oba typy przewijania w chrome.
Sam
12

Rozumiem, że odpowiedź została już zaakceptowana, ale chciałem opublikować informacje o tym, z czego korzystam, na wypadek, gdyby mogło to pomóc każdemu. Otrzymuję kierunek jak cliphexw przypadku kółka myszy, ale z obsługą Firefoksa. Przydatne jest robienie tego w ten sposób, jeśli robisz coś takiego jak blokowanie przewijania i nie możesz uzyskać bieżącego przewijania na górze.

Zobacz wersję na żywo tutaj .

$(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
    }
});
wybredny
źródło
@EtienneMartin powyższy kod opiera się na jQuery, jeśli to właśnie powodowało błąd. Proszę zobaczyć dołączone skrzypce, aby zobaczyć, jak działa.
souporserious
8

Przewiń wydarzenie

Do zdarzenia scroll zachowuje się dziwnie w FF (jest on zwolniony wiele razy ze względu na gładkość przewijania), ale to działa.

Uwaga: przewijania zdarzenie rzeczywiście jest zwolniony podczas przeciągania paska przewijania, za pomocą klawiszy strzałek lub kółka myszy.

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

Wydarzenie na kole

Możesz także rzucić okiem na MDN, który zawiera świetne informacje o zdarzeniu Wheel .

Uwaga: Zdarzenie koła jest uruchamiane tylko przy użyciu kółka myszy ; Klawisze kursora i przeciąganie paska przewijania nie wywołują zdarzenia.

Przeczytałem dokument i przykład: Słuchając tego wydarzenia w przeglądarce
i po kilku testach z FF, IE, chrome, safari, skończyłem z tym fragmentem:

//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);
});
jherax
źródło
2
Mam stały widok panelu, który wyłącza rzeczywisty pasek przewijania, więc musiałem wykryć kierunek z kółka myszy. Twoje kółko myszy działało idealnie w różnych przeglądarkach, więc dziękuję za to!
Shannon Hochkins,
8

Jeśli chcesz tylko wiedzieć, czy przewijasz w górę lub w dół za pomocą wskaźnika (myszy lub panelu dotykowego ), możesz użyć właściwości deltaYwheel zdarzenia.

$('.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>

Jurij
źródło
Ten link mówi, aby nie polegać na deltaY developer.mozilla.org/en-US/docs/Web/Events/wheel
Charlie Martin
3
var tempScrollTop, currentScrollTop = 0; 

$(window).scroll(function(){ 

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

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

  tempScrollTop = currentScrollTop; 
} 

lub użyj rozszerzenia kółka myszy , patrz tutaj .

Adam
źródło
3

Widziałem tutaj wiele dobrych odpowiedzi, ale wygląda na to, że niektórzy ludzie mają problemy z przeglądarkami, więc to moja naprawa.

Z powodzeniem wykorzystałem to do wykrycia kierunku w FF, IE i Chrome ... Nie testowałem tego podczas safari, ponieważ zwykle używam systemu Windows.

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

Pamiętaj, że używam tego również, aby zatrzymać przewijanie, więc jeśli chcesz, aby przewijanie nadal występowało, musisz je usunąć e.preventDefault(); e.stopPropagation();

GoreDefex
źródło
1
zawsze wraca na Androida GS5
SISYN
To działało świetnie! Miałem problem z najczęściej głosowaną odpowiedzią w IE. To nie ma tego problemu! +1 ode mnie
Radmation,
3

Aby zignorować jakiekolwiek przyciąganie / pęd / odbicie na górze i na dole strony, oto zmodyfikowana wersja zaakceptowanej odpowiedzi Josiaha :

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;
});
Andrew Tibbetts
źródło
3

Możesz określić kierunek przewijania myszy.

$(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');
    }
});
J. Kovacevic
źródło
3

Użyj tego, aby znaleźć kierunek przewijania. Służy to wyłącznie znalezieniu kierunku zwoju pionowego. Obsługuje wszystkie przeglądarki.

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

    }

Przykład

Vasi
źródło
3

ten kod działa poprawnie w IE, Firefox, Opera i Chrome:

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

„kółko myszy” i właściwość deltaY muszą być użyte w funkcji bind () .

Pamiętaj: ze względów bezpieczeństwa użytkownik musi zaktualizować swój system i przeglądarki. W 2018 r. Wymówki „Mam IE 7” to nonsens. Musimy edukować użytkowników.

Miłego dnia :)

Cyril Morales
źródło
1
Próbowałem twojego kodu i jest na odwrót. Pierwszy jest uruchamiany podczas przewijania w dół, a drugi podczas przewijania w górę.
AlexioVay,
Cześć :) Dzięki AlexioVay. Zmodyfikowałem swój kod (także o czasie!) ^^. Oczywiście „console.log ('.......')” to tylko przykład tego, co możemy zrobić.
Cyril Morales
2

Zachowaj to bardzo proste:

Sposób nasłuchiwania zdarzeń jQuery:

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

Sposób Vanilla JavaScript Event Listener Way:

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

Funkcja pozostaje taka sama:

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

Napisałem bardziej dogłębnego post na niego tutaj

CR Rollyson
źródło
Czy do korzystania z wersji jquery wymagane jest koło Jquery-Wheel?
Hastig Zusammenstellen
1
jquery-wheel nie jest wymagany dla tego @HastigZusammenstellen
CR Rollyson
2

Możesz użyć opcji przewijania i kółka myszy, aby jednocześnie śledzić ruch w górę i w dół.

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

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

Możesz również zastąpić „body” (Window).

Zeeshan Rasool
źródło
Wygląda na to, że działa dobrze w Chrome, ale nie w FF (55.0.2, Ubuntu)
Hastig Zusammenstellen
1

stwórz przyrost .data ()przewijanego elementu, a następnie będziesz mógł sprawdzić, ile razy przewiń dotarł do góry.

Spacefrog
źródło
1

Dlaczego nikt nie używa eventobiektu zwróconego przez jQueryprzewijanie?

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

Używam chromiumi nie sprawdzałem w innych przeglądarkach, czy mają tę dirwłaściwość.

Jiab77
źródło
1

Ponieważ bindzostał wycofany z wersji v3 („zastąpiony przez on”) i wheeljest teraz obsługiwany , zapomnij 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>

wheelZgodność wydarzenia z przeglądarką w MDN (18.03.2019) :

Zgodność zdarzenia koła

CPHPython
źródło
Powyższy kod tworzy dwa dzienniki konsoli, użyj następujących poleceń, aby całkowicie oddzielić w górę / w dół / w lewo / w prawo: 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
touchmoveZamiast tego zdarzenie do użytku mobilnego .
CPHPython
1

Możesz również tego użyć

$(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>

arvinda kumar
źródło
0

w .data()elemencie możesz zapisać JSON i przetestować wartości, aby uruchomić zdarzenia

{ top : 1,
   first_top_event: function(){ ...},
   second_top_event: function(){ ...},
   third_top_event: function(){ ...},
   scroll_down_event1: function(){ ...},
   scroll_down_event2: function(){ ...}
}
Spacefrog
źródło
0

Jest to proste i łatwe wykrywanie, gdy użytkownik przewija się od góry strony i kiedy wraca na górę.

$(window).scroll(function() {
    if($(window).scrollTop() > 0) {
        // User has scrolled
    } else {
        // User at top of page
    }
});
Kbam7
źródło
0

Jest to optymalne rozwiązanie do wykrywania kierunku właśnie w momencie przewijania przez użytkownika.

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

});
Mahmoud
źródło
0

Powinieneś tego spróbować

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();
    });
thakurdev
źródło
0

Miałem problemy z elastycznym przewijaniem (podskakiwanie, gumowanie). Ignorowanie zdarzenia przewijania w dół, jeśli znajdowało się blisko góry strony, działało dla mnie.

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;
});
uggeh
źródło
0

Działa to we wszystkich przeglądarkach na komputery i telefony, rozwijając najlepsze odpowiedzi. Można zbudować bardziej złożone okno obiektu zdarzenia [„scroll_evt”], a następnie wywołać je w funkcji handleScroll (). Ten wyzwala dla 2 współbieżnych warunków, jeśli upłynęło określone opóźnienie lub minęła się pewna delta w celu wyeliminowania niektórych niepożądanych wyzwalaczy.

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"]);
}
Zręcznościowy
źródło