Athan Clark Athan Clark - 2 months ago 14
CSS Question

How much overflow in a DOM element

Is there a way to see how much overflow-x there is in a DOM element? It's easy to allow a DOM element to overflow in a certain direction -

overflow:scroll;
is all it takes in CSS. However, is there an easy way to query how overflow there is in a DOM element? Something that comes to mind in jquery might be:

var last = $("#foo").last();
var left = last.position().left;
var width = last.width();
// overflows on the right by...
var fooLeft = $("#foo").position().left;
var fooWidth = $("#foo").width();
var fooRight = fooLeft+fooWidth;

ver overflowRight = left + width - fooRight

Answer

If you have a DOM node (node), the width of the node is node.clientWidth, and the width of the scrollable region is node.scrollWidth.

That means that the overflow is the difference between these two numbers:

node.scrollWidth - node.clientWidth