CODEWITHSUNDEEP
javascriptdom
arno
arno

Reputation: 1

determine if an element is scrollable in html document

Hi I'm trying to check if an html element is scrollable.Only gecko support is needed (and webkit support would be nice but not necessary). Documentation tells that scrollHeight and clientHeight are the same when an element has no vertical scrollbar https://developer.mozilla.org/en/DOM/element.scrollHeight But I discovered gecko adds margin size to scrollHeight. So, for an element with margins, scrollHeight is superior to clientHeight. https ://bugzilla.mozilla.org/show_bug.cgi?id=576976#c2

So, I use something like:

var clientHeight = element.clientHeight;
var borderTop = window.getComputedStyle(element,null).getPropertyValue('border-top-width');
var borderBottom = window.getComputedStyle(element,null).getPropertyValue('border-bottom-width');
var scrollHeight = element.scrollHeight - parseInt(borderTop, 10) - parseInt(borderBottom, 10);

It works fine except in one case: when I use firefox zoom. Let's say I have a border of 1px around my element. clientHeight and scrollHeight will have a difference of 2px (1 for top, 1 for bottom). But unfortunately, window.getComputedStyle(element,null).getPropertyValue('border-bottom-width') will be less than 1px when user zooms page.

So, is there a reliable way to determine in firefox if an element has some scrollbars ?

Upvotes: 0

Views: 704

Answers (1)

DanMan
DanMan

Reputation: 11561

Use offsetHeight instead of clientHeight since that includes the border, so you needn't concern yourself with that.

Upvotes: 1

Related Questions