The underflow event is fired when an element is no longer overflowed by its content (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 |
Does the event normally bubble? |
cancelable Read only |
boolean |
Is it possible to cancel the event? |
view Read only |
WindowProxy |
document.defaultView (the window of the document). |
detail Read only |
long (float) |
0 for vertical underflow, 1 for horizontal, 2 for both |
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>