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, selector indicates the selector that needs to be bound to the mouse wheel event , mousewheel is 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 an event object, which contains some information about the mouse wheel event. Among them, the event.originalEvent property 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 the event.originalEvent object

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

In the above code, if the current browser supports the wheelDelta attribute, get the The value of the attribute is assigned to the delta variable. Otherwise, assign the inverse of the detail attribute to the delta variable. The detail property represents the distance the mouse wheel rolls each time, and the wheelDelta property represents the distance the mouse wheel rolls.

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

Method 2: Use the event.originalEvent.deltaY property

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

In the above code, directly use the deltaY property 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 the delta variable to 0; then judge## Whether the #event.originalEvent attribute exists. If it exists, further determine whether the wheelDelta, detail and deltaY attributes exist. If they exist, calculate based on the attribute value. The distance the wheel rolls. Finally, perform the appropriate actions.

I hope this article will help readers understand and master how to use jQuery to get the mouse wheel rolling distance.

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!