The overflow
event is fired when an element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with overflow != visible).
General info
- Specification
- None,Mozilla specific
- Interface
- UIEvent
- Bubbles
- Yes
- Cancelable
- Yes
- Target
- Document, Element
- Default Action
- None.
Properties
Property | Type | Description |
---|---|---|
target Read only |
EventTarget |
The event target (the topmost target in the DOM tree). |
type Read only |
DOMString |
The type of event. |
bubbles Read only |
Boolean |
Whether the event normally bubbles or not. |
cancelable Read only |
Boolean |
Whether the event is cancellable or not. |
view Read only |
WindowProxy |
document.defaultView (window of the document) |
detail Read only |
long (float ) |
0. |
Example
<div id="wrapper"> <div id="child"></div> </div> <br/> <label><input type="checkbox" id="toggle" checked/> Overflow</label> <style> #wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getElementById("wrapper"), child = document.getElementById("child"), toggle = document.getElementById("toggle"); wrapper.addEventListener("overflow", function( event ) { console.log( event ); }, false); wrapper.addEventListener("underflow", function( event ) { console.log( event ); }, false); toggle.addEventListener("change", function( event ) { if ( event.target.checked ) { child.style.width = "40px"; child.style.height = "40px"; } else { child.style.width = "10px"; child.style.height = "10px"; } }, false); </script>