JavaScript/CSS: how do I check if an element has overflowed?

Something I want to know just infrequently enough.  How is it done?  How do I know, if I’ve got an element with “overflow:auto”, if it’s generated the scrollbar?  And why do I want to know?

This is a handy technique when trying to, for instance, truncate unwieldy text within a fixed space.  The trick?

Compare the element’s clientWidth (or clientHeight) to it’s scrollWidth (or scrollHeight).  If the scrollWidth > clientWidth, the element has gone off the edge.  Voila!  Hopefully next time I need to remember this, I remember where I wrote it down.

Add comment December 11th, 2008