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 |
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 overflow, 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>