JS events-scroll wheel events

Source: Internet
Author: User

JS events-scroll wheel events

I learned about the mouse events such as onmouseover and onmousedown. Today, we are looking at the scroll wheel events of the mouse. browser compatibility is always quite disgusting. Today, we are going to be disgusted with it, look at this disgusting mouse scroll event!

 

Scroll wheel event onIn IE and Google Chrome, onmousewheelThis event is implemented, but the onmousewheel is not recognized under Firefox FF,DOMMouseScroll is required for FF, and an event must be added as an "event listener" to be valid.;

We all know that event listening is used to bind events:

In IE, event listening is implemented through attachEvent.

In Chrome and FF, event listening is implemented through addEventListener.

 

This scene is disgusting:

Event monitoring wheel events

Google addEventListener onmousewheel

IE attachEvent onmousewheel

FF addEventListener DOMMouseScroll

 

For browser compatibility, we encapsulate a "function bound to events"

 

function addEvent(obj,xEvent,fn) {    if(obj.attachEvent){      obj.attachEvent('on'+xEvent,fn);    }else{      obj.addEventListener(xEvent,fn,false);    }}

Window. onload = function () {// then use our own encapsulated function to bind events to the div, var oDiv = document. getElementById ('div1 '); addEvent (oDiv, 'mousewheel', onMouseWheel); addEvent (oDiv, 'domainmousescroll ', onMouseWheel); // when a scroll wheel event occurs, run the onMouseWheel function onMouseWheel () {alert ('hahaha ');}}

Sometimes, when you scroll the scroll wheel, you need to know whether the scroll wheel is rolled up or down.

 

The returned values of event. wheelDelta in IE and Chrome indicate whether the scroll wheel is rolled up or down.

When the return value is positive, it means to roll up

When the returned value is a negative value, it indicates that the value is rolled down.

However, event. wheelDelta does not work under Firefox,In Firefox, you need to use event. detail to know whether the scroll wheel is rolled up or down.Firefox has the following differences:

When the returned value is a positive value, it indicates that the data is rolled down.

When the returned value is a negative value, it indicates that the value is rolled up.

 

Next, the div height increases when the scroll wheel is scroll down, And the div height decreases when the scroll wheel is rolling up.

1. You need to define a flag where the scroll wheel is rolled up or down.

2. browser compatibility is required

3. Disable default browser behavior.

 

Window. onload = function () {var oDiv = document. getElementById ('div1 '); function onMouseWheel (ev) {/* When a scroll wheel event occurs, perform some operations */var ev = ev | window. event; var down = true; // defines a flag. When the scroll wheel is rolled down, execute some operations down = ev. wheelDelta? Ev. wheelDelta <0: ev. detail> 0; if (down) {oDiv. style. height = oDiv. offsetHeight + 10 + 'px ';} else {oDiv. style. height = oDiv. offsetHeight-10 + 'px ';} if (ev. preventDefault) {/* FF and Chrome */ev. preventDefault (); // block default events} return false;} addEvent (oDiv, 'mousewheel ', onMouseWheel); addEvent (oDiv, 'dommousescroll', onMouseWheel );} function addEvent (obj, xEvent, fn) {if (obj. attachEvent) {obj. attachEvent ('on' + xEvent, fn);} else {obj. addEventListener (xEvent, fn, false );}}


 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.