We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

overflow

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>

Document Tags and Contributors

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