So ermitteln Sie die Scrolldistanz des Mausrads in JQuery

In der Webentwicklung sind Mausrad-Ereignisse eine sehr häufige und wichtige Funktion. Bei der Entwicklung mit jQuery kann es jedoch vorkommen, dass Sie die Distanz beim Scrollen des Mausrads ermitteln müssen. In diesem Artikel erfahren Sie, wie Sie mithilfe von jQuery die Scrolldistanz des Mausrads ermitteln.

Bevor wir beginnen, muss eines klargestellt werden: Mausradereignisse verhalten sich in verschiedenen Browsern und Betriebssystemen nicht genau gleich. Daher müssen beim Schreiben von Code Kompatibilitätsprobleme berücksichtigt werden.

Werfen wir zunächst einen Blick auf die grundlegende Syntax von Mausradereignissen:

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

Im obigen Code stellt selector den Selektor dar, der an Mausradereignisse gebunden werden muss, mousewheel </ code> ist der Name des Mausrad-Ereignisses. Wenn das Mausrad-Ereignis ausgelöst wird, wird die angegebene Funktion ausgeführt. <code>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

Beim Ausführen der Funktion müssen Sie ein event-Objekt übergeben, das einige Informationen über das Mausrad-Ereignis enthält. Darunter enthält die Eigenschaft event.originalEvent das ursprüngliche Mausrad-Ereignisobjekt, über das die Distanz des Radrollens ermittelt werden kann.

Als nächstes schauen wir uns an, wie man die Scrolldistanz des Mausrads ermittelt. 🎜🎜Methode 1: Verwenden Sie das Objekt event.originalEvent 🎜rrreee🎜Wenn der aktuelle Browser im obigen Code das Attribut wheelDelta unterstützt, rufen Sie den Wert des Attributs ab und weisen Sie ihn zu es in die Variable delta umwandeln. Andernfalls weisen Sie der Variablen delta die Umkehrung des Attributs detail zu. Das Attribut detail stellt die Distanz dar, die das Mausrad jedes Mal zurücklegt, und das Attribut wheelDelta stellt die Distanz dar, die das Mausrad zurücklegt. 🎜🎜Es ist zu beachten, dass der Wert von wheelDelta positiv oder negativ sein kann, während der Wert von detail nur positiv oder 0 sein kann. Um mit verschiedenen Browsern und Betriebssystemen kompatibel zu sein, müssen Sie daher -event.originalEvent.detail verwenden, um die Scrolldistanz des Rads zu ermitteln. 🎜🎜Methode 2: Verwenden Sie die Eigenschaft event.originalEvent.deltaY 🎜rrreee🎜Verwenden Sie im obigen Code direkt die Eigenschaft deltaY, um die Distanz zu ermitteln, in der das Mausrad rollt. Es ist zu beachten, dass dieses Attribut nur von einigen Browsern und Betriebssystemen unterstützt wird und daher nicht zuverlässig ist. 🎜🎜Zusammenfassend können wir die beiden oben genannten Methoden verwenden, um die Distanz des Mausrads zu ermitteln. Im eigentlichen Entwicklungsprozess ist es jedoch am besten, beide Methoden zu berücksichtigen und so weit wie möglich die allgemeinere Methode zu verwenden, um mit verschiedenen Browsern und Betriebssystemen kompatibel zu sein. 🎜🎜Zusammenfassend lautet der Code zum Ermitteln der Rolldistanz des Mausrads wie folgt: 🎜rrreee🎜Im obigen Code initialisieren wir zuerst die Variable delta auf 0; dann bestimmen wir das Ereignis . originalEvent Ob das Attribut existiert, wird weiter bestimmt, ob die Attribute wheelDelta, detail und deltaY vorhanden sind Wenn sie vorhanden sind, wird das Rollen des Rades anhand des Attributwerts berechnet. Führen Sie abschließend die entsprechenden Aktionen aus. 🎜🎜Ich hoffe, dass dieser Artikel den Lesern hilft, zu verstehen und zu beherrschen, wie man mit jQuery die Rolldistanz des Mausrads ermittelt. 🎜

Das obige ist der detaillierte Inhalt vonSo ermitteln Sie die Scrolldistanz des Mausrads in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!