Czy istnieje sposób na uzyskanie zdarzeń kółka myszy (nie mówiąc o scroll
zdarzeniach) w jQuery?
javascript
jquery
mousewheel
thejh
źródło
źródło
$(el).on('input', ...
Odpowiedzi:
Jest wtyczka, która wykrywa kółko myszy w górę / w dół i prędkość w regionie.
źródło
$(document).ready(function(){ $('#foo').bind('mousewheel', function(e){ if(e.originalEvent.wheelDelta /120 > 0) { console.log('scrolling up !'); } else{ console.log('scrolling down !'); } }); });
źródło
DOMMouseScroll
Zdarzenie jest używany w FF, więc trzeba wysłuchać obu.bind('DOMMouseScroll mousewheel') {
evetns developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/...e.originalEvent.wheelDelta
jest niezdefiniowana w FF23Wiązanie z obydwoma
mousewheel
iDOMMouseScroll
skończyło się dla mnie naprawdę dobrze:$(window).bind('mousewheel DOMMouseScroll', function(event){ if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { // scroll up } else { // scroll down } });
Ta metoda działa w IE9 +, Chrome 33 i Firefox 27.
Edycja - marzec 2016
Postanowiłem wrócić do tego problemu, ponieważ minęło trochę czasu. Strona MDN dla zdarzenia przewijania ma świetny sposób na pobranie pozycji przewijania, z
requestAnimationFrame
której korzysta , co jest wysoce preferowane niż moja poprzednia metoda wykrywania. Zmodyfikowałem ich kod, aby zapewnić lepszą kompatybilność oprócz kierunku przewijania i pozycji:(function() { var supportOffset = window.pageYOffset !== undefined, lastKnownPos = 0, ticking = false, scrollDir, currYPos; function doSomething(scrollPos, scrollDir) { // Your code goes here... console.log('scroll pos: ' + scrollPos + ' | scroll dir: ' + scrollDir); } window.addEventListener('wheel', function(e) { currYPos = supportOffset ? window.pageYOffset : document.body.scrollTop; scrollDir = lastKnownPos > currYPos ? 'up' : 'down'; lastKnownPos = currYPos; if (!ticking) { window.requestAnimationFrame(function() { doSomething(lastKnownPos, scrollDir); ticking = false; }); } ticking = true; }); })();
Ten kod obecnie pracuje w
Chrome v50, Firefox v44, Safari v9, and IE9+
Bibliografia:
źródło
Od teraz w 2017 roku możesz po prostu pisać
$(window).on('wheel', function(event){ // deltaY obviously records vertical scroll, deltaX and deltaZ exist too if(event.originalEvent.deltaY < 0){ // wheeled up } else { // wheeled down } });
Działa z obecnymi przeglądarkami Firefox 51, Chrome 56, IE9 +
źródło
Odpowiedzi dotyczące zdarzenia „mousewheel” odnoszą się do wycofanego zdarzenia. Standardowym wydarzeniem jest po prostu „koło”. Zobacz https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel
źródło
wheel
zdarzenie jest obsługiwane naEdge
nie,IE
co nie jest tym samym. CanIuseTo zadziałało dla mnie :)
//Firefox $('#elem').bind('DOMMouseScroll', function(e){ if(e.originalEvent.detail > 0) { //scroll down console.log('Down'); }else { //scroll up console.log('Up'); } //prevent page fom scrolling return false; }); //IE, Opera, Safari $('#elem').bind('mousewheel', function(e){ if(e.originalEvent.wheelDelta < 0) { //scroll down console.log('Down'); }else { //scroll up console.log('Up'); } //prevent page fom scrolling return false; });
z przepełnienia stosu
źródło
Oto rozwiązanie waniliowe. Może być używany w jQuery, jeśli zdarzenie przekazane do funkcji jest tym,
event.originalEvent
które jQuery udostępnia jako właściwość zdarzenia jQuery. Lub jeśli wewnątrzcallback
funkcji poniżej dodamy przed pierwszą linią:event = event.originalEvent;
.Ten kod normalizuje prędkość / wielkość kółka i jest dodatni dla tego, co byłoby przewijaniem do przodu w typowej myszy i ujemny dla ruchu kółka myszy do tyłu.
Demo: http://jsfiddle.net/BXhzD/
var wheel = document.getElementById('wheel'); function report(ammout) { wheel.innerHTML = 'wheel ammout: ' + ammout; } function callback(event) { var normalized; if (event.wheelDelta) { normalized = (event.wheelDelta % 120 - 0) == -0 ? event.wheelDelta / 120 : event.wheelDelta / 12; } else { var rawAmmount = event.deltaY ? event.deltaY : event.detail; normalized = -(rawAmmount % 3 ? rawAmmount * 10 : rawAmmount / 3); } report(normalized); } var event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll'; window.addEventListener(event, callback);
Jest też wtyczka do jQuery, która jest bardziej rozwlekła w kodzie i trochę więcej cukru: https://github.com/brandonaaron/jquery-mousewheel
źródło
Działa to we wszystkich najnowszych wersjach IE, Firefox i Chrome.
$(document).ready(function(){ $('#whole').bind('DOMMouseScroll mousewheel', function(e){ if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) { alert("up"); } else{ alert("down"); } }); });
źródło
Utknąłem dzisiaj w tym problemie i stwierdziłem, że ten kod działa dobrze
$('#content').on('mousewheel', function(event) { //console.log(event.deltaX, event.deltaY, event.deltaFactor); if(event.deltaY > 0) { console.log('scroll up'); } else { console.log('scroll down'); } });
źródło
użyj tego kodu
knob.bind('mousewheel', function(e){ if(e.originalEvent.wheelDelta < 0) { moveKnob('down'); } else { moveKnob('up'); } return false; });
źródło
moja kombinacja wygląda tak. zanika i zanika przy każdym przewijaniu w dół / w górę. w przeciwnym razie musisz przewinąć w górę do nagłówka, aby go zaniknąć.
var header = $("#header"); $('#content-container').bind('mousewheel', function(e){ if(e.originalEvent.wheelDelta > 0) { if (header.data('faded')) { header.data('faded', 0).stop(true).fadeTo(800, 1); } } else{ if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0); } });
powyższy nie jest zoptymalizowany pod kątem dotyku / telefonu komórkowego, myślę, że ten działa lepiej dla wszystkich telefonów komórkowych:
var iScrollPos = 0; var header = $("#header"); $('#content-container').scroll(function () { var iCurScrollPos = $(this).scrollTop(); if (iCurScrollPos > iScrollPos) { if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0); } else { //Scrolling Up if (header.data('faded')) { header.data('faded', 0).stop(true).fadeTo(800, 1); } } iScrollPos = iCurScrollPos; });
źródło
Wtyczka, którą opublikował @DarinDimitrov
jquery-mousewheel
, jest zepsuta w jQuery 3+ . Byłoby bardziej wskazane użyciejquery-wheel
który działa z jQuery 3+.Jeśli nie chcesz korzystać z trasy jQuery, MDN bardzo ostrzega przed użyciem
mousewheel
zdarzenia, ponieważ jest ono niestandardowe i nie jest obsługiwane w wielu miejscach. Zamiast tego mówi, że powinieneś używaćwheel
zdarzenia, ponieważ uzyskujesz znacznie większą dokładność w zakresie dokładnych wartości, które otrzymujesz. Jest obsługiwany przez większość głównych przeglądarek.źródło
Jeśli używasz wspomnianej wtyczki jquery mousewheel , to co powiesz na użycie drugiego argumentu funkcji obsługi zdarzeń -
delta
:$('#my-element').on('mousewheel', function(event, delta) { if(delta > 0) { console.log('scroll up'); } else { console.log('scroll down'); } });
źródło
Niedawno mam ten sam problem, gdzie
$(window).mousewheel
wracałemundefined
To, co zrobiłem, było
$(window).on('mousewheel', function() {});
Do dalszego przetwarzania używam:
function (event) { var direction = null, key; if (event.type === 'mousewheel') { if (yourFunctionForGetMouseWheelDirection(event) > 0) { direction = 'up'; } else { direction = 'down'; } } }
źródło