overflow event
Occurs when the contents or the size of an element is changed and it causes a scrollbar to appear.
The opposite event is the underflow event, which fires when the contents or the size of an element is changed and it causes a scrollbar to disappear.
Use the detail property for the overflow and underflow events to identify the scrollbars whose visibility has changed.
A value of 0 means the vertical scrollbar, a value of 1 means the horizontal scrollbar and a value of 2 means both the horizontal and vertical scrollbars.
The overflowchanged event provides similar functionality in Google Chrome and Safari.
To modify the behavior of the scrollbars for an element, use the overflow style property.How to register:
In HTML:
In JavaScript:object.addEventListener ("overflow", handler, useCapture);
This event cannot be registered in HTML.
In JavaScript:
The event object is accessible to all event handlers in all browsers.
The properties of the event object contain additional information about the current event.
To get further details about these properties and the possible event handler registration methods, please see the page for the event object.
| For a complete list of events, see the page for Events in JavaScript. |
Basic information:
| Bubbles | No |
| Cancelable | No |
| Event object | UIEvent |
Actions that invoke the overflow event:
- Modifying the contents of an element (by script or by the user).
- Changing the width or height of an element (by script or by the user).
Example HTML code 1:
This example illustrates the use of the overflow event.
|
|
||||
<head> <script type="text/javascript"> function Init () { var div = document.getElementById ("myDiv"); if (div.addEventListener) { div.addEventListener ('overflow', OnOverflowChanged, false); div.addEventListener ('underflow', OnOverflowChanged, false); } } function OnOverflowChanged (event) { if (event.type == "overflow") { switch (event.detail) { case 0: alert ("The vertical scrollbar has appeared."); break; case 1: alert ("The horizontal scrollbar has appeared."); break; case 2: alert ("The horizontal and vertical scrollbars have both appeared."); break; } } else { switch (event.detail) { case 0: alert ("The vertical scrollbar has disappeared."); break; case 1: alert ("The horizontal scrollbar has disappeared."); break; case 2: alert ("The horizontal and vertical scrollbars have both disappeared."); break; } } } function ResizeTo (w, h) { var div = document.getElementById ("myDiv"); div.style.width = w + "px"; div.style.height = h + "px"; } </script> </head> <body onload="Init ();"> <div id="myDiv" style="width:200px;height:200px; overflow:auto; background-color:#e0a0a0;"> <nobr>Text of the first line.</nobr><br/> <nobr>Text of the second line.</nobr><br/> <nobr>Text of the third line.</nobr><br/> <nobr>Text of the fourth line.</nobr><br/> <nobr>Text of the fifth line.</nobr><br/> <nobr>Text of the sixth line.</nobr><br/> </div> <br /><br /><br /> <button onclick="ResizeTo (100, 100);">Resize to 100*100</button> <button onclick="ResizeTo (200, 100);">Resize to 200*100</button> <button onclick="ResizeTo (100, 200);">Resize to 100*200</button> <button onclick="ResizeTo (200, 200);">Resize to 200*200</button> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Related pages:
User Contributed Comments