Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] impress.js i scroll myszy
Forum PHP.pl > Forum > Po stronie przeglądarki
DawiT
Hej. Próbuje właśnie zrobić stronę opartą o impress.js ( https://github.com/impress/impress.js )
Głównie w impress'ie chodzi o to że strona obraca się (lewo, prawo, do góry nogami) dzięki CSS 3 transition.
Niestety (dla mnie) poruszanie się po stronie odbywa się za pomocą klawiszy tab, spacja i strzałki.
Ja bym chciał aby poruszanie się po stronie odbywało się za pomocą myszki, a dokładnie mówiąc kółka myszy.
Jeśli kręciłbym kółkiem w swoją stronę (tzn. w dół) strona by się przewijała dalej, a jeśli w drugą no to oczywiście w górę.
Kombinowałem
Kod
    $(window).scroll(function(){

});

Ale nie działa, gdyż tak na prawdę element body tak na prawdę się w ogólnie nie rusza (jest na całą wysokość okna przeglądarki)
więc moje zapytanie to:
czy jest coś w javascript/jQuery co by wykryło określony ruch kółka myszy mimo że body się nie rusza?
trueblue
Zdarzenia mousewheel oraz DOMMouseScroll.
DawiT
Dzięki za odpowiedź. Naprowadziło mnie to już na właściwe tory.

Po wpisaniu kodu:
Kod
document.addEventListener( "wheel", function ( event){
            //alert(event); --> wyskakuje [object WhellEvent];
            console.log(event);
}


W konsoli jest obiekt WheelEvent ze zmiennymi takimi jaki IsTrued, deltaX, deltaY, deltaMode.
Zauwarzyłem że przy kręceniu kółkiem zmienia się deltaY.

Próbowałem z instrukcją warunkową z uwzględnieniem obiektu:
Kod
if( WheelEvent[deltaY] == "100" ) {
//cos;
}

Niestety konsola wyrzuca mi błąd undefined 'deltaY' :|
Co radzicie?
trueblue
Radzę skorzystać z Google.
https://www.sitepoint.com/html5-javascript-mouse-wheel/
DawiT
Dzięki! smile.gif Pomogło smile.gif

Wklejam gdyby ktoś szukał:

Kod
                var e = window.event || e; // old IE support
            var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));


wtedy wartość z delti jest zapisywana w zmiennej var delta smile.gif

Temat można zamknąć.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.