Comment détecter et gérer les événements de la molette de la souris dans jQuery ?

Gestion des événements de la molette de la souris dans jQuery

Bien que jQuery fournisse une prise en charge robuste pour la gestion de divers événements utilisateur, y compris les événements de défilement, vous pourriez rencontrer le besoin pour capturer spécifiquement les événements de la molette de la souris. Cela peut être utile, par exemple, lors de l'implémentation de fonctionnalités d'interface utilisateur pilotées par la souris ou de fonctions de défilement personnalisées.

Événement de molette de souris jQuery :

Pour gérer les événements de molette de souris dans jQuery , vous pouvez utiliser le classeur d'événements mousewheel. Cet événement se déclenche lorsqu'un utilisateur fait défiler avec la molette de sa souris. L'objet événement (représenté par e) inclut la propriété originalEvent.wheelDelta, qui fournit la direction de défilement de la roue.

Capture de la direction de défilement de la roue :

En cochant la valeur de originalEvent.wheelDelta / 120, vous pouvez déterminer le sens de défilement :

• Les valeurs positives indiquent un défilement vers le haut (défilement vers le haut de la page).
• Les valeurs négatives représentent le bas défilement (défilement vers le bas de la page).

Exemple d'utilisation :

Pour démontrer comment implémenter la gestion des événements de la molette de la souris, considérez le code jQuery suivant :

$(document).ready(function(){
    $('#foo').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta /120 > 0) {
            console.log('scrolling up !');
        }
        else{
            console.log('scrolling down !');
        }
    });
});

Dans cet exemple, nous lions l'événement mousewheel à un élément avec l'ID "foo". Lorsque l'utilisateur fait défiler la molette de la souris sur cet élément, le gestionnaire d'événements est déclenché et enregistre la direction de défilement sur la console.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!