Comment obtenir la distance de défilement de la molette de la souris dans jquery

Dans le développement Web, les événements de la molette de la souris sont une fonctionnalité très courante et importante. Cependant, lors du développement avec jQuery, vous pouvez rencontrer une situation dans laquelle vous devez obtenir la distance de défilement de la molette de la souris. Dans cet article, nous allons explorer comment obtenir la distance de défilement de la molette de la souris à l'aide de jQuery.

Avant de commencer, une chose doit être claire : les événements de la molette de la souris ne se comportent pas exactement de la même manière dans les différents navigateurs et systèmes d'exploitation. Par conséquent, les problèmes de compatibilité doivent être pris en compte lors de l’écriture du code.

Tout d'abord, jetons un coup d'œil à la syntaxe de base des événements de la molette de la souris :

$(selector).on('mousewheel', function(event) {
    //执行操作
});

Dans le code ci-dessus, selector représente le sélecteur qui doit être lié aux événements de la molette de la souris, mousewheel est le nom de l'événement de la molette de la souris. Lorsque l'événement de la molette de la souris est déclenché, la fonction spécifiée sera exécutée. selector表示需要绑定鼠标滚轮事件的选择器，mousewheel是鼠标滚轮事件的名称。当鼠标滚轮事件触发时，会执行指定的函数。

在执行函数时，需要传入一个event对象，该对象包含了鼠标滚轮事件的一些信息。其中，event.originalEvent属性包含了原始的鼠标滚轮事件对象，可以通过该对象获取滚轮滚动的距离。

接下来，让我们来看一下如何获取鼠标滚轮的滚动距离。

方法一：使用event.originalEvent对象

$(selector).on('mousewheel', function(event) {
    var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
    //执行操作
});

在上面的代码中，如果当前浏览器支持wheelDelta属性，则获取该属性的值并赋给delta变量。否则，将detail属性的相反数赋给delta变量。detail属性表示鼠标滚轮每次滚动的距离，而wheelDelta属性表示鼠标滚轮滚动的距离。

需要注意的是，wheelDelta的值可以是正数也可以是负数，而detail的值只能是正数或0。因此，为了兼容各个浏览器和操作系统，需要使用-event.originalEvent.detail来获取滚轮滚动的距离。

方法二：使用event.originalEvent.deltaY属性

$(selector).on('mousewheel', function(event) {
    var delta = event.originalEvent.deltaY;
    //执行操作
});

在上面的代码中，直接使用deltaY属性来获取鼠标滚轮滚动的距离。需要注意的是，该属性只在部分浏览器和操作系统下被支持，因此不太可靠。

综上所述，我们可以使用以上两种方式来获取鼠标滚轮滚动的距离。然而，在实际开发过程中，为了兼容各个浏览器和操作系统，最好将这两种方式都进行考虑，并尽可能地使用更加通用的方式。

总结一下，获取鼠标滚轮滚动距离的代码如下：

$(selector).on('mousewheel', function(event) {
    var delta = 0;
    if (event.originalEvent) {
        if (event.originalEvent.wheelDelta) {
            delta = event.originalEvent.wheelDelta / 120;
        } else if (event.originalEvent.detail) {
            delta = -event.originalEvent.detail / 3;
        } else if (event.originalEvent.deltaY) {
            delta = event.originalEvent.deltaY / 120;
        }
    }
    //执行操作
});

在上面的代码中，我们首先初始化了delta变量为0；然后判断event.originalEvent属性是否存在，如果存在则进一步判断wheelDelta、detail和deltaY

Lors de l'exécution de la fonction, vous devez transmettre un objet event, qui contient des informations sur l'événement de la molette de la souris. Parmi eux, la propriété event.originalEvent contient l'objet événement original de la molette de la souris, grâce auquel la distance de roulement de la roue peut être obtenue.

Ensuite, voyons comment obtenir la distance de défilement de la molette de la souris. 🎜🎜Méthode 1 : utilisez l'objet event.originalEvent 🎜rrreee🎜Dans le code ci-dessus, si le navigateur actuel prend en charge l'attribut wheelDelta, obtenez la valeur de l'attribut et attribuez-lui à la variable delta. Sinon, affectez l'inverse de l'attribut detail à la variable delta. L'attribut detail représente la distance parcourue par la molette de la souris à chaque fois, et l'attribut wheelDelta représente la distance parcourue par la molette de la souris. 🎜🎜Il est à noter que la valeur de wheelDelta peut être positive ou négative, tandis que la valeur de detail ne peut être que positive ou 0. Par conséquent, afin d'être compatible avec différents navigateurs et systèmes d'exploitation, vous devez utiliser -event.originalEvent.detail pour obtenir la distance de défilement de la molette. 🎜🎜Méthode 2 : utilisez la propriété event.originalEvent.deltaY 🎜rrreee🎜Dans le code ci-dessus, utilisez directement la propriété deltaY pour obtenir la distance de roulement de la molette de la souris. Il convient de noter que cet attribut n’est pris en charge que par certains navigateurs et systèmes d’exploitation, il n’est donc pas fiable. 🎜🎜Pour résumer, nous pouvons utiliser les deux méthodes ci-dessus pour obtenir la distance de roulement de la molette de la souris. Cependant, dans le processus de développement actuel, afin d'être compatible avec différents navigateurs et systèmes d'exploitation, il est préférable de considérer les deux méthodes et d'utiliser autant que possible la méthode la plus générale. 🎜🎜Pour résumer, le code pour obtenir la distance de roulement de la molette de la souris est le suivant : 🎜rrreee🎜Dans le code ci-dessus, on initialise d'abord la variable delta à 0 puis on détermine l'événement . originalEvent Si l'attribut existe. S'il existe, il est en outre déterminé si les attributs wheelDelta, detail et deltaY existent. s'ils existent, le roulement de la roue est calculé en fonction de la valeur de l'attribut distance. Enfin, effectuez les actions appropriées. 🎜🎜J'espère que cet article aidera les lecteurs à comprendre et à maîtriser comment utiliser jQuery pour obtenir la distance de roulement de la molette de la souris. 🎜

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!