underflow

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>

Document Tags and Contributors

Contributors to this page: dflanagan, gfritzsche, ethertank, louisremi, Sheppy
Last updated by: gfritzsche,