Tyler Cipriani: Cross-Browser JavaScript Scrollbar Detection

comment 1

ilycite — Sun, 25 Jan 2015 02:53:12 +0000

Hello, great work. I adapted your code to let the possibility to chose on which axe the check is made. Here the code : https://gist.github.com/numee/.. ..

comment 2

clottes.code — Fri, 17 Jul 2015 13:35:13 +0000

// rootElem for quirksmode

var rootElem = document.documentElement || document.body

shouldn’t you be checking if the clientHeight of document is 0 (not that documentElement exists) when assigning rootElem… (if I’m following your resoning above)

isn’t this what you mean:?

var rootElem = document.documentElement

if(!rootElem.clientHeight) rootElem = document.body

comment 3

clottes.code — Fri, 17 Jul 2015 13:39:47 +0000

Note: that rootElem in my previous comment would only be viable then in the rest of the code for calculating things available on that element and would require changing, my point is rootElem will always be document.documentElement (because it exists in IE8 if I’m not mistaken)

comment 4

ashraf.reda.m — Sun, 17 Jul 2016 02:49:20 +0000

Works Great, Thanks..

Great stuff

franciskim — Thu, 01 Dec 2016 04:42:55 +0000

Seems like the best answer I’ve found to this problem, thank you.

Using the code

glinnewe — Wed, 29 Mar 2017 14:44:06 +0000

Hi,

Thanks for the great write up!

Could you please go until a bit more detail regarding how we would apply the code?

For example, I’d like to do a check to see if the scrollbar exists and is pushing the content over and, if so, then add a class to the body. How would this be done?

I basically want to be able to do the following:

if ( hasScrollBar ) { $(‘body’).addClass(‘window_has_scrollbar’); }

Works very well

riophaelee — Sat, 13 May 2017 18:17:05 +0000

Thank you!