Home > Web Front-end > JS Tutorial > javascript mouse wheel event_javascript skills

javascript mouse wheel event_javascript skills

WBOY
Release: 2016-05-16 18:54:17
Original
942 people have browsed it

Today I found a function that responds to the scroll wheel on the Internet and rewritten it into the following class

Copy the code The code is as follows:

function wheelEvent(obj, handle)
{
this.handle = handle;
// different events between Firefox and IE
window.addEventListener ? obj.addEventListener("DOMMouseScroll", this.wheel, false) : (obj.onmousewheel = this.wheel);
}
wheelEvent.prototype.wheel = function (event)
{
var ev = event || window.event ;
var delta = ev.wheelDelta ? (ev.wheelDelta / 120) : (- ev.detail / 3); // Firefox using `wheelDelta` IE using `detail`
eval ('delta ? ' parent .handle '(delta) : null;');
}

When using it, you need to define an execution function to operate based on the value obtained from the above class and provide Adds an event to the specified web page element. For example,
Copy code The code is as follows:

function handle(delta)
{
document.getElementById('text').scrollTop -= delta * 20;
}
new wheelEvent(document.getElementById('text'), 'handle');
In the above example The first parameter is the web element that adds the scroll wheel event, the div with the id of text; the second parameter is the name of the execution function, handle.
The handle function must have and has only one parameter delta. When the wheel rolls up, delta is greater than 0, and when it goes down, delta is less than 0. The function of the handle function in the above example is to use the scroll wheel to implement the scroll bar function on the div.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template