Szukam czegoś do tego efektu:
$(window).scroll(function(event){
if (/* magic code*/ ){
// upscroll code
} else {
// downscroll code
}
});
Jakieś pomysły?
javascript
jquery
Zach
źródło
źródło
wheel
dzisiejszych czasach: stackoverflow.com/a/33334461/3168107 .Odpowiedzi:
Sprawdź aktualny
scrollTop
vs poprzedniscrollTop
źródło
lastScrollTop
od 0, czy będzie ona poprawnie zainicjowana?var lastScrollTop = $(window).scrollTop()
po tym, jak przeglądarka zaktualizuje pozycję przewijania przy ładowaniu strony.Możesz to zrobić bez konieczności śledzenia poprzedniego przewijania u góry, ponieważ wszystkie pozostałe przykłady wymagają:
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
mousewheel
zdarzenia za pomocą powiązania,originalEvent
atrybut parametru zdarzenia wywołania zwrotnego zawiera inne informacje. Część tych informacji towheelDelta
. 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
mousewheel
zdarzenia 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.źródło
scrollTop
nie zaktualizowałem. Tak naprawdę$(window).scroll()
wcale nie strzelał.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 ):
źródło
Istniejące rozwiązanie
Mogą być 3 rozwiązania z tego postu i innej odpowiedzi .
Rozwiązanie 1
Rozwiązanie 2
Rozwiązanie 3
Test wielu przeglądarek
Nie mogłem przetestować tego na Safari
chrom 42 (Win 7)
Firefox 37 (Win 7)
IE 11 (Win 8)
IE 10 (Win 7)
IE 9 (Win 7)
IE 8 (Win 7)
Połączone rozwiązanie
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.
źródło
Safari browser
, pomocne byłoby uzupełnienie rozwiązania.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
cliphex
w 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 .
źródło
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.
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:
źródło
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 deltaY
wheel
zdarzenia.źródło
lub użyj rozszerzenia kółka myszy , patrz tutaj .
źródło
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.
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();
źródło
Aby zignorować jakiekolwiek przyciąganie / pęd / odbicie na górze i na dole strony, oto zmodyfikowana wersja zaakceptowanej odpowiedzi Josiaha :
źródło
Możesz określić kierunek przewijania myszy.
źródło
Użyj tego, aby znaleźć kierunek przewijania. Służy to wyłącznie znalezieniu kierunku zwoju pionowego. Obsługuje wszystkie przeglądarki.
Przykład
źródło
ten kod działa poprawnie w IE, Firefox, Opera i Chrome:
„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 :)
źródło
Zachowaj to bardzo proste:
Sposób nasłuchiwania zdarzeń jQuery:
Sposób Vanilla JavaScript Event Listener Way:
Funkcja pozostaje taka sama:
Napisałem bardziej dogłębnego post na niego tutaj
źródło
Możesz użyć opcji przewijania i kółka myszy, aby jednocześnie śledzić ruch w górę i w dół.
Możesz również zastąpić „body” (Window).
źródło
stwórz przyrost
.data ()
przewijanego elementu, a następnie będziesz mógł sprawdzić, ile razy przewiń dotarł do góry.źródło
Dlaczego nikt nie używa
event
obiektu zwróconego przezjQuery
przewijanie?Używam
chromium
i nie sprawdzałem w innych przeglądarkach, czy mają tędir
właściwość.źródło
Ponieważ
bind
został wycofany z wersji v3 („zastąpiony przezon
”) iwheel
jest teraz obsługiwany , zapomnijwheelDelta
:wheel
Zgodność wydarzenia z przeglądarką w MDN (18.03.2019) :źródło
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'); }
touchmove
Zamiast tego zdarzenie do użytku mobilnego .Możesz również tego użyć
źródło
w
.data()
elemencie możesz zapisać JSON i przetestować wartości, aby uruchomić zdarzeniaźródło
Jest to proste i łatwe wykrywanie, gdy użytkownik przewija się od góry strony i kiedy wraca na górę.
źródło
Jest to optymalne rozwiązanie do wykrywania kierunku właśnie w momencie przewijania przez użytkownika.
źródło
Powinieneś tego spróbować
źródło
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.
źródło
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.
źródło