The Oft-Overlooked Overflow and Un= derflow Events

A Primer on Overflow and Und= erflow

To level-set, I=E2=80=99ll define and describe what overflow = and underflow are in the context of the web. Overflow is a rather simple co= ncept you=E2=80=99re probably familiar with: when an element=E2=80=99s cont= ent takes up more space than it allows, given style or box model constraint= s, it causes a scrollbar to appear or the content to be cut off from view (= if you set overflow: hidden;). Underflow is the less common ca= se you probably don=E2=80=99t think about: an element currently in an overf= lown state leaves that state as a result of the element growing in size or = a reduction of the amount of content within it =E2=80=93 visually, the scro= llbars disappear and all content is visible within the element. As it turns= out, Firefox and WebKit browsers offer events that alert you of changes be= tween these two flow states.

Let= =E2=80=99s Talk Flow Events, Boyee!

In Firefox there are two separat= e events, overflow and underflow. In WebKit brows= ers, there is a single event, overflowchanged. In using these = events, it becomes painfully clear that WebKit=E2=80=99s catch-all ov= erflowchanged event is ill-conceived. Webkit=E2=80=99s overflo= wchanged event forces you to compare three different event propertie= s, event.orient, event.verticalOverflow, and event.horizontalOverflow to filter for various combinations of val= ues in order do anything useful =E2=80=93 needless to say, it=E2=80=99s abo= ut as fun as a = bag of glass. The bad news: as you=E2=80=99ve now come to expect, Inter= net Explorer doesn=E2=80=99t support any variant of flow events, here=E2=80= =99s my surprised face =E2=80=93>

Unifying Flow Events

To make this f= low event circus easier to deal with, let=E2=80=99s distill them into one c= ross-browser method that allows us to discreetly listen for overflow and un= derflow state changes:

function addFlowListener(element, type, fn){
  var flow =3D type =3D=3D 'over';
  element.addEventListener('OverflowEvent' in window ? 'overflowchanged' : =
type + 'flow', function(e){
    if (e.type =3D=3D (type + 'flow') ||
      ((e.orient =3D=3D 0 && e.horizontalOverflow =3D=3D flow) ||=
=20
      (e.orient =3D=3D 1 && e.verticalOverflow =3D=3D flow) ||=20
      (e.orient =3D=3D 2 && e.horizontalOverflow =3D=3D flow &&=
amp; e.verticalOverflow =3D=3D flow))) {
      return fn.call(this, e);
    }
  }, false);
}

// Example usage
addFlowListener(myElement, 'over', function(){ ... });
addFlowListener(myElement, 'under', function(){ ... });

The Oft-Ove= rlooked Overflow and Underflow Events

A Primer on Overflow and Und= erflow

Let= =E2=80=99s Talk Flow Events, Boyee!

Unifying Flow Events

Look What I Can Do!

= Recent Posts

Edit in JSFiddle