Existe-t-il un moyen d'obtenir les événements de la molette de la souris (sans parler des scroll
événements) dans jQuery?
$(el).on('input', ...
Existe-t-il un moyen d'obtenir les événements de la molette de la souris (sans parler des scroll
événements) dans jQuery?
$(el).on('input', ...
Réponses:
Il existe un plugin qui détecte la molette de la souris haut / bas et la vitesse sur une région.
$(document).ready(function(){
$('#foo').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0) {
console.log('scrolling up !');
}
else{
console.log('scrolling down !');
}
});
});
DOMMouseScroll
événement est utilisé dans FF, vous devez donc écouter sur les deux .bind('DOMMouseScroll mousewheel') {
evetns developer.mozilla.org/en-US/docs/DOM/DOM_event_reference
e.originalEvent.wheelDelta
n'est pas défini dans FF23
Lié aux deux mousewheel
et a DOMMouseScroll
fini par fonctionner très bien pour moi:
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// scroll up
}
else {
// scroll down
}
});
Cette méthode fonctionne dans IE9 +, Chrome 33 et Firefox 27.
Edit - mars 2016
J'ai décidé de revenir sur cette question depuis un certain temps. La page MDN pour l'événement de défilement a un excellent moyen de récupérer la position de défilement qui l'utilise requestAnimationFrame
, ce qui est hautement préférable à ma méthode de détection précédente. J'ai modifié leur code pour offrir une meilleure compatibilité en plus de la direction et de la position du défilement:
(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;
});
})();
Ce code fonctionne actuellement dans Chrome v50, Firefox v44, Safari v9, and IE9+
Références:
À partir de maintenant en 2017, vous pouvez simplement écrire
$(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
}
});
Fonctionne avec Firefox 51, Chrome 56, IE9 + actuels
Les réponses évoquant l'événement "mousewheel" font référence à un événement obsolète. L'événement standard est simplement "roue". Voir https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel
Cela a fonctionné pour moi :)
//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;
});
Voici une solution vanille. Peut être utilisé dans jQuery si l'événement passé à la fonction est event.originalEvent
que jQuery rend disponible en tant que propriété de l'événement jQuery. Ou si à l'intérieur de la callback
fonction sous nous ajoutons avant la première ligne:event = event.originalEvent;
.
Ce code normalise la vitesse / quantité de la roue et est positif pour ce qui serait un défilement vers l'avant dans une souris typique, et négatif dans un mouvement de roue arrière de la souris.
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);
Il existe également un plugin pour jQuery, qui est plus détaillé dans le code et un peu plus de sucre: https://github.com/brandonaaron/jquery-mousewheel
Cela fonctionne dans les dernières versions de chaque IE, Firefox et Chrome.
$(document).ready(function(){
$('#whole').bind('DOMMouseScroll mousewheel', function(e){
if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
alert("up");
}
else{
alert("down");
}
});
});
J'étais coincé dans ce problème aujourd'hui et j'ai trouvé que ce code fonctionnait bien pour moi
$('#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');
}
});
utiliser ce code
knob.bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta < 0) {
moveKnob('down');
} else {
moveKnob('up');
}
return false;
});
ma combinaison ressemble à ceci. il s'estompe et s'estompe à chaque défilement vers le bas / vers le haut. sinon, vous devez faire défiler jusqu'à l'en-tête, pour faire fondre l'en-tête.
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);
}
});
celui ci-dessus n'est pas optimisé pour le tactile / mobile, je pense que celui-ci le fait mieux pour tous les mobiles:
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;
});
Le plugin que @DarinDimitrov a publié jquery-mousewheel
, est cassé avec jQuery 3+ . Il serait plus judicieux d'utiliser jquery-wheel
ce qui fonctionne avec jQuery 3+.
Si vous ne souhaitez pas utiliser la route jQuery, MDN met en garde contre l'utilisation de l' mousewheel
événement car il n'est pas standard et n'est pas pris en charge dans de nombreux endroits. Il indique plutôt que vous devez utiliser l' wheel
événement car vous obtenez beaucoup plus de spécificité sur ce que signifient exactement les valeurs que vous obtenez. Il est pris en charge par la plupart des principaux navigateurs.
Si vous utilisez le plugin jquery mousewheel mentionné , que diriez-vous d'utiliser le 2ème argument de la fonction de gestionnaire d'événements - delta
:
$('#my-element').on('mousewheel', function(event, delta) {
if(delta > 0) {
console.log('scroll up');
}
else {
console.log('scroll down');
}
});
J'ai eu le même problème récemment où
$(window).mousewheel
revenaitundefined
Ce que j'ai fait était $(window).on('mousewheel', function() {});
Pour le traiter, j'utilise:
function (event) {
var direction = null,
key;
if (event.type === 'mousewheel') {
if (yourFunctionForGetMouseWheelDirection(event) > 0) {
direction = 'up';
} else {
direction = 'down';
}
}
}