Athan Clark Athan Clark - 1 year ago 70
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 -

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 Source

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
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download