Existe-t-il un moyen d'obtenir les événements de molette de la souris (sans parler des événements scroll
) dans jQuery?
Il existe un plugin qui détecte la molette de la souris et la vélocité vers le haut/bas 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 !');
}
});
});
Les réponses concernant l'événement "mousewheel" font référence à un événement déconseillé. L'événement standard est simplement "roue". Voir https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel
À 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 et IE9 + actuels
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 à la vanille. Peut être utilisé dans jQuery si l'événement transmis à 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 fonction callback
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 pour un mouvement de molette vers l’arrière.
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 y a aussi un plugin pour jQuery, qui est plus détaillé dans le code et du sucre supplémentaire: https://github.com/brandonaaron/jquery-mousewheel
Cela fonctionne dans les dernières versions d'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 numéro 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;
});
Le plugin que @DarinDimitrov a publié, jquery-mousewheel
, est cassé avec jQuery 3+ . Il serait plus judicieux d'utiliser jquery-wheel
qui fonctionne avec jQuery 3+.
Si vous ne souhaitez pas utiliser la route jQuery, MDN recommande vivement l’événement mousewheel
car il est non standard et non pris en charge dans de nombreux cas. Au lieu de cela, il est indiqué que vous devez utiliser l'événement wheel
, car vous obtenez beaucoup plus de précision sur la signification exacte des valeurs que vous obtenez. Il est supporté par la plupart des navigateurs majeurs.
Si vous utilisez le plugin jquery mousewheel mentionné précédemment , alors qu’en est-il d’utiliser le deuxiè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');
}
});
ma combinaison ressemble à ceci. il s'estompe et apparaît à chaque défilement vers le haut/le bas. sinon, vous devez faire défiler jusqu'à l'en-tête, pour fondre l'en-tête dans.
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);
}
});
le précédent n'est pas optimisé pour le toucher/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;
});