overflowchanged event
Occurs when the contents or the size of an element is changed and it causes a scrollbar to appear or disappear.
Use the orient property to identify the scrollbars whose visibility has changed, and the horizontalOverflow and verticalOverflow properties to detect whether the scrollbars are visible.
To modify the behavior of the scrollbars for an element, use the overflow style property.
How to register:
In HTML:
In JavaScript:object.addEventListener ("overflowchanged", 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 | OverflowEvent |
Actions that invoke the overflowchanged event:
- Modifying the contents of the element (by script or by the user).
- Changing the width or height of the element (by script or by the user).
Example HTML code 1:
This example illustrates the use of the overflowchanged event.
|
|
||||
<head> <script type="text/javascript"> function Init () { var div = document.getElementById ("myDiv"); if (div.addEventListener) { div.addEventListener ('overflowchanged', OnOverflowChanged, false); } } function OnOverflowChanged (event) { switch (event.orient) { case OverflowEvent.HORIZONTAL: alert ("The visibility of the vertical scrollbar is changed."); break; case OverflowEvent.VERTICAL: alert ("The visibility of the horizontal scrollbar is changed."); break; case OverflowEvent.BOTH: alert ("The visibility of the horizontal and vertical scrollbars are also changed."); break; } if (event.horizontalOverflow) { alert ("The contents overflow horizontally."); } else { alert ("The contents do not overflow horizontally."); } if (event.verticalOverflow) { alert ("The contents overflow vertically."); } else { alert ("The contents do not overflow vertically."); } } 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