133

I just want some simple JQ/JS to check if the current page/window (not a particular element) has a vertical scrollbar.

Googling gives me stuff that seems overly complex for just this basic feature.

How can this be done?

13 Answers 13

103
$(document).ready(function() {
    // Check if body height is higher than window height :)
    if ($("body").height() > $(window).height()) {
        alert("Vertical Scrollbar! D:");
    }

    // Check if body width is higher than window width :)
    if ($("body").width() > $(window).width()) {
        alert("Horizontal Scrollbar! D:<");
    }
});
5
  • 15
    +1 but for the sake of exactness, this only checks whether the content expands further than the viewport. If the overflow property of the body is set to hidden somewhere along the line, it won't work. Setting hidden on a body is extremely rare, though.
    – Pekka
    Jan 27, 2010 at 12:57
  • 5
    This does not work if the body height matches the window height, which is the case if the doc height matches the viewport exactly then a horizontal scrollbar is added. It will force vert. scrollbar but doc/body/window height are the same; it will NOT alert "vertical scrollbar" even tho there is one. Nov 27, 2012 at 21:55
  • 2
    Just thought I'd mention that I had to use $(document) instead of $("body"), this worked for me when body didn't (I have an absolute positoned container with an aspect ratio on width/height)
    – am_
    Jun 12, 2014 at 12:26
  • 1
    I have report page on Chrome browser where it initially displays a scroll bar and vanishes in a matter of milliseconds which looks like a browser behaviour since I did not programme it. So this function return true always in my case..
    – D777Stack
    Jun 24, 2015 at 8:02
  • @TiuTalk for me $("body").height() & $(window).height() gives same value, instead I use $(document).height() > $(window).height() it works for me.
    – SarangK
    Oct 4, 2016 at 5:08
89

try this:

var hasVScroll = document.body.scrollHeight > document.body.clientHeight;

This will only tell you if the vertical scrollHeight is bigger than the height of the viewable content, however. The hasVScroll variable will contain true or false.

If you need to do a more thorough check, add the following to the code above:

// Get the computed style of the body element
var cStyle = document.body.currentStyle||window.getComputedStyle(document.body, "");

// Check the overflow and overflowY properties for "auto" and "visible" values
hasVScroll = cStyle.overflow == "visible" 
             || cStyle.overflowY == "visible"
             || (hasVScroll && cStyle.overflow == "auto")
             || (hasVScroll && cStyle.overflowY == "auto");
9
  • 1
    +1 Nice! And with the necessary computed style (which was the point at which I decided not to get involved with this question ;)
    – Pekka
    Jan 27, 2010 at 13:04
  • lol yeah I was debating whether or not to make the extra effort to write it because in many cases it's not needed.
    – Andy E
    Jan 27, 2010 at 13:08
  • 1
    This results in hasVScroll being true whenever overflowY is 'visible' regardless of whether the scrollHeight is greater than the clientHeight. Maybe you meant cStyle.overflow === 'scroll'?
    – B T
    Oct 3, 2016 at 21:11
  • 7
    The above code does not work. Browser: Chrome 56. Url: news.greylock.com/… Mar 16, 2017 at 9:38
  • 1
    @BT cStyle.overflow == "visible" can show scroll bars when the element is the document.body. But it should be (hasVScroll && cStyle.overflow == "visible" && element.nodeName == "BODY") . Plus it needs to check for cStyle.overflow === 'scroll' as you point out.
    – mseifert
    Apr 2, 2017 at 7:22
48

I tried the previous answer and doesn't seem to be working the $("body").height() does not necessarily represent the whole html height.

I have corrected the solution as follows:

// Check if body height is higher than window height :) 
if ($(document).height() > $(window).height()) { 
    alert("Vertical Scrollbar! D:"); 
} 

// Check if body width is higher than window width :) 
if ($(document).width() > $(window).width()) { 
    alert("Horizontal Scrollbar! D:<"); 
} 
0
18

Let's bring this question back from the dead ;) There is a reason Google doesn't give you a simple solution. Special cases and browser quirks affect the calculation, and it is not as trivial as it seems to be.

Unfortunately, there are problems with the solutions outlined here so far. I don't mean to disparage them at all - they are great starting points and touch on all the key properties needed for a more robust approach. But I wouldn't recommend copying and pasting the code from any of the other answers because

  • they don't capture the effect of positioned content in a way that is reliable cross-browser. The answers which are based on body size miss this entirely (the body is not the offset parent of such content unless it is positioned itself). And those answers checking $( document ).width() and .height() fall prey to jQuery's buggy detection of document size.
  • Relying on window.innerWidth, if the browser supports it, makes your code fail to detect scroll bars in mobile browsers, where the width of the scroll bar is generally 0. They are just shown temporarily as an overlay and don't take up space in the document. Zooming on mobile also becomes a problem that way (long story).
  • The detection can be thrown off when people explicitly set the overflow of both the html and body element to non-default values (what happens then is a little involved - see this description).
  • In most answers, body padding, borders or margins are not detected and distort the results.

I have spent more time than I would have imagined on a finding a solution that "just works" (cough). The algorithm I have come up with is now part of a plugin, jQuery.isInView, which exposes a .hasScrollbar method. Have a look at the source if you wish.

In a scenario where you are in full control of the page and don't have to deal with unknown CSS, using a plugin may be overkill - after all, you know which edge cases apply, and which don't. However, if you need reliable results in an unknown environment, then I don't think the solutions outlined here will be enough. You are better off using a well-tested plugin - mine or anybody elses.

12
  • Thanks. Quite a bit complicated! If you don't want to/need to be backward compatible is there perhaps an easier solution for html5 browsers? I mean perhaps the browser coders/w3c have been nice enough to just tell us if there are scrollbars or not on an element? ;-)
    – Leo
    Apr 11, 2015 at 1:36
  • 1
    @Leo Not that I am aware of. Well, there is a window.scrollbars object which has a single property, visible. Sounds promising but isn't. It is not supported in IE, including IE11. And it just tells you that there is a scroll bar - but not which one. See the test page here.
    – hashchange
    Apr 17, 2015 at 16:51
  • Thanks @hashchange. It sounds incredible stupid that it just tells if there is any scrollbar so I guess it is just some kind of test yet. A bit promising though. ;-)
    – Leo
    Apr 17, 2015 at 23:39
  • 1
    @BT Ok, great. Now let me lead you to the entrance of the rabbit hole ;) Here's a demo where the content is not enough to fill the window. Your detection works in FF but fails in Chrome. And here's another demo where a positioned element is placed far down the page. Your detection works in Chrome but fails in FF.
    – hashchange
    Oct 5, 2016 at 10:00
  • 1
    @BT And I guess we can get into a bunch of weird failure modes when we begin to play with overflow settings because their behaviour is a little odd, but I've stopped right there.
    – hashchange
    Oct 5, 2016 at 10:01
16

This one did works for me:

function hasVerticalScroll(node){
    if(node == undefined){
        if(window.innerHeight){
            return document.body.offsetHeight> window.innerHeight;
        }
        else {
            return  document.documentElement.scrollHeight > 
                document.documentElement.offsetHeight ||
                document.body.scrollHeight>document.body.offsetHeight;
        }
    }
    else {
        return node.scrollHeight> node.offsetHeight;
    }
}

For the body, just use hasVerticalScroll().

2
  • This is the only answer in this thread that works on my Chrome Sep 4, 2019 at 15:46
  • clientHeight is preferable over offsetHeight here. Otherwise you can have a thick border, and return there is no scrollbar when there is.
    – theicfire
    Nov 20, 2019 at 1:29
16
let hasScrollbar = window.innerWidth > document.documentElement.clientWidth;
2
3

Oddly none of these solutions tell you if a page has a vertical scrollbar.

window.innerWidth - document.body.clientWidth will give you the width of the scrollbar. This should work in anything IE9+ (not tested in the lesser browsers). (Or to strictly answer the question, !!(window.innerWidth - document.body.clientWidth)

Why? Let's say you have a page where the content is taller than the window height and the user can scroll up/down. If you're using Chrome on a Mac with no mouse plugged in, the user will not see a scrollbar. Plug a mouse in and a scrollbar will appear. (Note this behaviour can be overridden, but that's the default AFAIK).

1
  • The explanation of Chrome-Mouse behaviour helped me figure out what I thought was inconsistent behaviour. Thanks!
    – theisof
    Dec 7, 2017 at 10:30
3
    <script>
    var scrollHeight = document.body.scrollHeight;
    var clientHeight = document.documentElement.clientHeight;
    var hasVerticalScrollbar = scrollHeight > clientHeight;

    alert(scrollHeight + " and " + clientHeight); //for checking / debugging.
    alert("hasVerticalScrollbar is " + hasVerticalScrollbar + "."); //for checking / debugging.
    </script>

This one will tell you if you have a scrollbar or not. I've included some information that may help with debugging, which will display as a JavaScript alert.

Put this in a script tag, after the closing body tag.

2

I found vanila solution

var hasScrollbar = function() {
  // The Modern solution
  if (typeof window.innerWidth === 'number')
    return window.innerWidth > document.documentElement.clientWidth

  // rootElem for quirksmode
  var rootElem = document.documentElement || document.body

  // Check overflow style property on body for fauxscrollbars
  var overflowStyle

  if (typeof rootElem.currentStyle !== 'undefined')
    overflowStyle = rootElem.currentStyle.overflow

  overflowStyle = overflowStyle || window.getComputedStyle(rootElem, '').overflow

    // Also need to check the Y axis overflow
  var overflowYStyle

  if (typeof rootElem.currentStyle !== 'undefined')
    overflowYStyle = rootElem.currentStyle.overflowY

  overflowYStyle = overflowYStyle || window.getComputedStyle(rootElem, '').overflowY

  var contentOverflows = rootElem.scrollHeight > rootElem.clientHeight
  var overflowShown    = /^(visible|auto)$/.test(overflowStyle) || /^(visible|auto)$/.test(overflowYStyle)
  var alwaysShowScroll = overflowStyle === 'scroll' || overflowYStyle === 'scroll'

  return (contentOverflows && overflowShown) || (alwaysShowScroll)
}

3
  • 1
    Not working in IE 11. window.innerWidth & document.documentElement.clientWidth are always same.
    – NLV
    Mar 29, 2016 at 15:27
  • Fixed it. This same function works for IE 11 too. The issue was this - stackoverflow.com/questions/17045132/…
    – NLV
    Mar 29, 2016 at 15:49
  • I tested this in Chrome 65 and it works. But when I adapt it for horizontal scrollbars, the result is strange: If both horizontal and vertical scrollbar are displayed, window.innerWidth > document.documentElement.clientWidth is true, but window.innerHeight > document.documentElement.clientHeight is not. It looks as if it were the other way around in this case. I am not a JS developer, I just need it for Selenium tests. I am grateful for hints.
    – kriegaex
    Mar 25, 2018 at 4:35
2

I use

function windowHasScroll()
{
    return document.body.clientHeight > document.documentElement.clientHeight;
}
1
  • this works fine but if you add height to body height: 100% then this will NOT work.
    – Syed
    Jun 4, 2021 at 4:07
1

Simply compare the width of the documents root element (i.e. html element) against the inner portion of the window:

if ((window.innerWidth - document.documentElement.clientWidth) >0) console.log('V-scrollbar active')

If you also need to know the scrollbar width:

vScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
1
  • this is a clever solution and handles a edge case where html element has overflow-y: scroll but there is no actual overflow on the page. other solutions that check the height for overflow fails this edge case.
    – kimbaudi
    Apr 23, 2021 at 23:43
0

Other solutions didn't work in one of my projects and I've ending up checking overflow css property

function haveScrollbar() {
    var style = window.getComputedStyle(document.body);
    return style["overflow-y"] != "hidden";
}

but it will only work if scrollbar appear disappear by changing the prop it will not work if the content is equal or smaller than the window.

0

I wrote an updated version of Kees C. Bakker's answer:

const hasVerticalScroll = (node) => {
  if (!node) {
    if (window.innerHeight) {
      return document.body.offsetHeight > window.innerHeight
    }
    return (document.documentElement.scrollHeight > document.documentElement.offsetHeight)
      || (document.body.scrollHeight > document.body.offsetHeight)
  }
  return node.scrollHeight > node.offsetHeight
}

if (hasVerticalScroll(document.querySelector('body'))) {
  this.props.handleDisableDownScrollerButton()
}

The function returns true or false depending whether the page has a vertical scrollbar or not.

For example:

const hasVScroll = hasVerticalScroll(document.querySelector('body'))

if (hasVScroll) {
  console.log('HAS SCROLL', hasVScroll)
}
1
  • this does not work if you explicitly set overflow-y: scroll on html tag and the page does not contain overflow. in this case, the vertical scrollbar will be visible (even though there is no overflow) and hasVerticalScroll(document.querySelector('body')) would incorrectly return false. @Babak's solution will handle this case.
    – kimbaudi
    Apr 23, 2021 at 23:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.