Home > Developer > JavaScript

Javascript scroll event Summary

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

A scroll event is a very useful event. It is usually used when you flip pages or zoom in. However, it is relatively difficult to implement compatibility in various browsers. It is known as the most standard ff. It uses a private Implementation of dommousescroll, while other browsers using mousewheel have more or less bugs. Let's take a look at the degree of support provided by various browsers.

IE Firefox Safari Chrome Opera
Window object False True True True True
Document Object True True True True True
Element Node True True True True True

Next, let's take a look at how to dispatch wheel events in Firefox:

 window. addeventlistener ("dommousescroll", function (event) {alert (event. type) Alert (event. clienty)}, false); var event = document. createevent ("mouseevent"); // in order to prove that the assignment is successful, set clienty to 90 event. initmouseevent ("dommousescroll", true, null, window, 0, 0, 0, 90, false, 0, null); window. dispatchevent

<Br/> <! Doctype HTML> <br/> <HTML lang = "ZH-ch"> <br/> <pead> <br/> <meta charset = "UTF-8"/> <br/> <meta content = "Ie = 8" http-equiv = "X-UA-compatible"/> <br/> <title> mousewheel event allocation by situ zhengmei </Title> </P> <p> <SCRIPT type = "text/JavaScript"> </P> <p> window. onload = function () {</P> <p> window. addeventlistener ("dommousescroll", function (event) {<br/> alert (event. type) <br/> alert (event. clienty) <br/>}, false); <br/> var event = document. createevent ("mouseevent"); <br/> // to prove that the assignment is successful, set clienty to 90. <br/> event. initmouseevent ("dommousescroll", true, null, window, 0, 0, 0, 90, false, 0, null); <br/> window. dispatchevent (Event) </P> <p >}</P> <p> </SCRIPT> <br/> <style type = "text/CSS"> </P> <p> </style> </P> <p> </pead> <br/> <body> <br/> </ptml> <br />

RunCode

We can see that although other standard browsers also support the dommousescroll event, when we scroll the mouse wheel manually, only FF responds, and two alert pops up. For other standard browsers, use mousewheel.

 
Window. addeventlistener ("mousewheel", function (event) {alert (event. type) Alert (event. clientx)}, false); var event = document. createevent ("mouseevent"); // to prove that the assignment is successful, set clientx to 120 event. initmouseevent ("mousewheel", true, null, window, 0, 0, 0,120, 0, false, 0, null); window. dispatchevent (Event)

<Br/> <! Doctype HTML> <br/> <HTML lang = "ZH-ch"> <br/> <pead> <br/> <meta charset = "UTF-8"/> <br/> <meta content = "Ie = 8" http-equiv = "X-UA-compatible"/> <br/> <title> mousewheel event allocation by situ zhengmei </Title> </P> <p> <SCRIPT type = "text/JavaScript"> <br/> window. addeventlistener ("mousewheel", function (event) {<br/> alert (event. type) <br/> alert (event. clientx) <br/>}, false); <br/> var event = document. createevent ("mouseevent"); <br/> // to prove that the assignment is successful, set clientx to 120. <br/> event. initmouseevent ("mousewheel", true, null, window, 0,120, 0, false, 0, null); <br/> window. dispatchevent (Event) </P> <p> </SCRIPT> <br/> <style type = "text/CSS"> </P> <p> </style> </P> <p> </pead> <br/> <body> <br/> </ptml> <br/>

Run code

This is effective in a standard browser other than ff. FF can only be used to assign events and cannot be manually triggered. It can be said that if the event type is not supported by the original browser, addeventlistener will ignore it.

It is much simpler for IE. It does not have to initialize the event, and you cannot set its properties because it is read-only, but can set custom properties.

 
Window. onload = function () {document. attachevent ("onmousewheel", function () {var E = Window. event; alert (e) Alert (E. type) Alert (E. aa)}); var event = document. createeventobject (); event. AA = "situ zhengmei" document. fireevent ("onmousewheel", event )}

<Br/> <! Doctype HTML> <br/> <HTML lang = "ZH-ch"> <br/> <pead> <br/> <meta charset = "UTF-8"/> <br/> <meta content = "Ie = 8" http-equiv = "X-UA-compatible"/> <br/> <title> mousewheel event allocation by situ zhengmei </Title> </P> <p> <SCRIPT type = "text/JavaScript"> <br/> window. onload = function () {<br/> document. attachevent ("onmousewheel", function () {<br/> var E = Window. event; <br/> alert (e) <br/> alert (E. type) <br/> alert (E. aa) <br/>}); <br/> var event = document. createeventobject (); <br/> event. AA = "situ zhengmei" </P> <p> document. fireevent ("onmousewheel", event) <br/>}< br/> </SCRIPT> <br/> <style type = "text/CSS"> </P> <p> </style> </ p> <p> </pead> <br/> <body> <br/> </ptml> <br/>

Run code

After the event is assigned, it is bound to the event section. Although only FF is currently using dommousescroll, We will writeProgramTo detect the required event types. Finally, we need to fix its rolling attribute in the callback function:

    • The attribute name of IE is detail, and the W3C is wheeldelta, which is now unified as delta.
    • IE and so on are rolled up to 120, and rolled down to-120. W3C rolled up to 3 and 3, but the opera9x series was incorrect. It was consistent with IE's rolling direction, but it was fixed after 10.
    • In earlier versions of safari, floating point numbers may occur in wheeldelta. We need to adjust the number on our own.
Function addevent (El, type, callback, usecapture) {If (El. dispatchevent) {// The W3C method takes precedence over El. addeventlistener (type, callback ,!! Usecapture);} else {el. attachevent ("On" + type, callback) ;}return callback; // return callback for ease of use when uninstalling} var wheel = function (OBJ, callback) {var wheeltype = "mousewheel" try {document. createevent ("mousescrollevents") wheeltype = "dommousescroll"} catch (e) {} addevent (OBJ, wheeltype, function (event) {If ("wheeldelta" in Event) {// unified as ± 120, where positive number indicates upward scrolling, negative number indicates downward scrolling var Delta = event. the scroll direction of the wheeldelta // opera 9x series is consistent with that of IE, And if (window. opera & opera. version () <10) Delta =-delta; // since the original attribute of the event object is read-only, we can only add a private attribute Delta to solve the compatibility problem event. delta = math. round (DELTA)/120; // fixed the floating point bug in Safari} else if ("detail" in event) {event. wheeldelta =-event. detail * 40 // Add more popular wheeldelta event for ff. delta = event. wheeldelta/120 // Add a Private Delta} callback. call (OBJ, event); // corrected this point of IE });}

Usage:

 
Wheel (document, function (e) {alert (E. Delta )});

</P> <p> <! Doctype HTML> <br/> <pead> <br/> <title> wheel event mousewheel by situ zhengmei </title> <br/> <Meta HTTP-equiv = "Content-Type" content = "text/html; charset = UTF-8 "> <br/> <style> <br/> body {<br/> padding: 10px 100px; <br/>}< br/>. slider {<br/> width: 48px; <br/> Height: 200px; <br/> padding: 5px 0px; <br/> Background: # Eee; <br/> cursor: N-resize; <br/>}< br/>. slider-slot {<br/> width: 16px; <br/> margin: 1 0px 15px; <br/> Height: 180px; <br/> Background: # Eee; <br/> border: 1px solid gray; <br/> border-color: #999 white #999; <br/> position: relative; <br/>}< br/>. slider-trigger {<br/> width: 14px; <br/> Height: 18px; <br/> Font: 1px/0 Arial; <br/> border: 1px solid gray; <br/> border-color: white #999 #999 white; <br/> Background: # CCC; <br/> position: absolute; <br/>}</P> <p> </style> <br/> <SCRIPT t Ype = "text/JavaScript" >/// <! [CDATA [<br/> window. onload = function () {<br/> function log (s) {<br/> window. console & console. log (s); <br/>}< br/> var get = function (I) {<br/> return document. getelementbyid (I); <br/>}< br/> function addevent (El, type, callback, usecapture) {<br/> If (El. dispatchevent) {// W3C mode is preferred <br/> el. addeventlistener (type, callback ,!! Usecapture); <br/>}else {<br/> el. attachevent ("On" + type, callback); <br/>}< br/> return callback; // return callback for ease of uninstallation <br/>}< br/> var wheel = function (OBJ, callback) {<br/> var wheeltype = "mousewheel" <br/> try {<br/> document. createevent ("mousescrollevents") <br/> wheeltype = "dommousescroll" <br/>} catch (e) {}< br/> addevent (OBJ, wheeltype, function (Event) {<br/> If ("wheeldelta" in event) {// unified to ± 120, where positive numbers indicate Scrolling up, negative number indicates scrolling down <br/> var Delta = event. wheeldelta <br/> // The scroll direction of the opera 9x series is the same as that of IE, and is fixed after 10. <br/> If (window. opera & opera. version () <10) <br/> Delta =-delta; <br/> // because the original attribute of the event object is read-only, we can only add a private property Delta to solve the compatibility problem <br/> event. delta = math. round (DELTA)/120; // fixed the floating point bug of safari <br/>} else if ("detail" in event) {<br/> event. wheeldelta =-event. detail * 40 // Add more popular wheeldelta for FF <br/> event. delta = event. wheeldelta/120 // Add a Private Delta <br/>}< br/> callback. call (OBJ, event); // modify this of IE to <br/>}); <br/>}< br/> function preventdefault (E) {<br/> If (E. preventdefault) <br/> E. preventdefault (); <br/> E. returnvalue = false; <br/>}</P> <p> wheel (get ("Number"), function (e) {<br/> This. value = (number (this. value) | 0) + E. delta /// 120; <br/> This. select (); <br/> preventdefault (e) <br/>}) </P> <p> wheel (get ("IMG"), function (E) {<br/> This. style. width = This. offsetwidth + E. delta + 'px '; <br/> This. style. height = This. offsetheight + E. delta + 'px '; <br/> preventdefault (e) </P> <p >}) </P> <p> function range (Num, Max, min) {<br/> return math. min (max, math. max (Num, min); <br/>}< br/> var tar = get ('slidertrigger'); <br/> wheel (get ("Slider "), function (e) {<br/> preventdefault (e) <br/> tar. style. top = range (TAR. offsettop + (-1 * E. delta * 10),) + 'px '; <br/> }) <br/>}< br/> </SCRIPT> <br/> </pead> <br/> <body> <br/> <H2> increase/decrease in the text box </H2> <br/> <div> <input type = "text" value = "300" id = "Number"> <br/> <span> after the text box gets the focus scroll the scroll wheel </span> <br/> </div> <br/> <H2> scroll and zoom the image </H2> <br/> <div> <br/> <br/> </div> <br/> <H2> mouse scroll Control slider movement </H2> <br/> <Div id = "Slider" class = "Slider"> <br/> <Div class = "Slider-slot"> <br/> <Div id = "slidertrigger" class = "Slider-Trigger"> <br/> <strong> </strong> <br /> <strong> </strong> <br/> </div> <br/> </div> </P> <p> </body> <br/> </ptml> </P> <p>

Run code

Event Property Applies to event: Up 1 click Up 2 clicks Down 1 click Down 2 clicks
E. wheeldelta

Supported in non
FF browsers

 OnmousewheelAnd in non FF
Browsers		 120 240 -120 -240
E. Detail

Supported in ff and
Opera

 DommousescrollAnd in FF
(As of ff3.x)		 -1 -2 1 2

The FF official website also provides a compatibility solution:

// Creates a global "addwheellistener" method // example: addwheellistener (ELEM, function (e) {console. log (E. deltay); E. preventdefault () ;}); (function (window, document) {var prefix = "", _ addeventlistener, onwheel, support; // detect event model if (window. addeventlistener) {_ addeventlistener = "addeventlistener";} else {_ addeventlistener = "attachevent"; prefix = "on";} // detect availa Ble wheel event if (document. onmousewheel! = Undefined) {// WebKit and IE support at least "mousewheel" support = "mousewheel"} Try {// modern browsers support "Wheel" wheelevent ("Wheel "); support = "Wheel";} catch (e) {} If (! Support) {// Let's assume that remaining browsers are older Firefox support = "dommousescroll";} window. addwheellistener = function (ELEM, callback, usecapture) {_ addwheellistener (ELEM, support, callback, usecapture); // handle implements mousepixelscroll in older Firefox if (Support = "dommousescroll ") {_ addwheellistener (ELEM, "mozmousepixelscroll", callback, usecapture) ;}; function _ addwhe Ellistener (ELEM, eventname, callback, usecapture) {ELEM [_ addeventlistener] (prefix + eventname, support = "Wheel "? Callback: function (originalevent ){! Originalevent & (originalevent = Window. event); // create a normalized event object var event = {// keep a ref to the original event object originalevent: originalevent, target: originalevent.tar GET | originalevent. srcelement, type: "Wheel", deltamode: originalevent. type = "mozmousepixelscroll "? 0: 1, deltax: 0, delatz: 0, preventdefault: function () {originalevent. preventdefault? Originalevent. preventdefault (): originalevent. returnvalue = false ;}}; // calculate deltay (and deltax) according to the event if (Support = "mousewheel") {event. deltay =-1/40 * originalevent. wheeldelta; // WebKit also support wheeldeltax originalevent. wheeldeltax & (event. deltax =-1/40 * originalevent. wheeldeltax);} else {event. deltay = originalevent. detail;} // It's time to fire the callback return callback (event) ;}, usecapture | false) ;}) (window, document );

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
javascript onclick event mousedown event javascript event bubbling javascript event how to call javascript function in php without any event elasticsearch scroll tombstone summary
Related Article
The html space symbol nbsp; ensp; emsp; introduces and implem...

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More