How to get the mouse wheel scrolling distance in jquery

In web development, mouse wheel events are a very common and important function. However, when developing with jQuery, you may encounter a situation where you need to obtain the distance of the mouse wheel scrolling. In this article, we will explore how to get the mouse wheel scroll distance using jQuery.

Before we begin, one thing needs to be made clear: mouse wheel events do not behave exactly the same in different browsers and operating systems. Therefore, compatibility issues need to be considered when writing code.

First, let’s take a look at the basic syntax of the mouse wheel event:

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

In the above code,selectorindicates the selector that needs to be bound to the mouse wheel event ,mousewheelis the name of the mouse wheel event. When the mouse wheel event is triggered, the specified function will be executed.

When executing the function, you need to pass in aneventobject, which contains some information about the mouse wheel event. Among them, theevent.originalEventproperty contains the original mouse wheel event object, through which the distance of the wheel rolling can be obtained.

Next, let’s take a look at how to get the scrolling distance of the mouse wheel.

Method 1: Use theevent.originalEventobject

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

In the above code, if the current browser supports thewheelDeltaattribute, get the The value of the attribute is assigned to thedeltavariable. Otherwise, assign the inverse of thedetailattribute to thedeltavariable. Thedetailproperty represents the distance the mouse wheel rolls each time, and thewheelDeltaproperty represents the distance the mouse wheel rolls.

It should be noted that the value ofwheelDeltacan be positive or negative, while the value ofdetailcan only be positive or 0. Therefore, in order to be compatible with various browsers and operating systems, you need to use-event.originalEvent.detailto obtain the scrolling distance of the wheel.

Method 2: Use theevent.originalEvent.deltaYproperty

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

In the above code, directly use thedeltaYproperty to get the mouse wheel scrolling distance. It should be noted that this attribute is only supported by some browsers and operating systems, so it is not reliable.

To sum up, we can use the above two methods to get the distance of the mouse wheel rolling. However, in the actual development process, in order to be compatible with various browsers and operating systems, it is best to consider both methods and use the more general method as much as possible.

To summarize, the code to obtain the mouse wheel rolling distance is as follows:

$(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; } } //执行操作 });

In the above code, we first initialize thedeltavariable to 0; then judge## Whether the #event.originalEventattribute exists. If it exists, further determine whether thewheelDelta,detailanddeltaYattributes exist. If they exist, calculate based on the attribute value. The distance the wheel rolls. Finally, perform the appropriate actions.

The above is the detailed content of How to get the mouse wheel scrolling distance in jquery. For more information, please follow other related articles on the PHP Chinese website!