Detect if a page has a vertical scrollbar

Question

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

User · Answer

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

User · Answer

lt script gt      var scrollHeight   document body scrollHeight      var clientHeight   document documentElement clientHeight      var hasVerticalScrollbar   scrollHeight  gt  clientHeight       alert scrollHeight     and     clientHeight     for checking   debugging      alert  hasVerticalScrollbar is     hasVerticalScrollbar           for checking   debugging       lt  script gt    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

User · Answer

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

User · Answer

This one did works for me   function hasVerticalScroll node       if node    undefined           if window innerHeight               return document body offsetHeight gt  window innerHeight                    else               return  document documentElement scrollHeight  gt                   document documentElement offsetHeight                    document body scrollHeight gt document body offsetHeight                      else           return node scrollHeight gt  node offsetHeight            For the body  just use hasVerticalScroll

User · Answer

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    gt    window  height           alert  Vertical Scrollbar  D             Check if body width is higher than window width     if    document  width    gt    window  width           alert  Horizontal Scrollbar  D  lt

User · Answer

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   gt 0  console log  V-scrollbar active     If you also need to know the scrollbar width   vScrollbarWidth   window innerWidth - document documentElement clientWidth

User · Answer

I wrote an updated version of Kees C  Bakker s answer   const hasVerticalScroll    node    gt      if   node        if  window innerHeight          return document body offsetHeight  gt  window innerHeight           return  document documentElement scrollHeight  gt  document documentElement offsetHeight            document body scrollHeight  gt  document body offsetHeight        return node scrollHeight  gt  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

User · Answer

I use function windowHasScroll         return document body clientHeight  gt  document documentElement clientHeight

User · Answer

var hasScrollbar   window innerWidth  gt  document documentElement clientWidth

User · Answer

document  ready function            Check if body height is higher than window height        if     body   height    gt    window  height              alert  Vertical Scrollbar  D                   Check if body width is higher than window width        if     body   width    gt    window  width              alert  Horizontal Scrollbar  D  lt

User · Answer

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

User · Answer

I found vanila solution   x000D   x000D  var hasScrollbar   function     x000D       The Modern solution x000D    if  typeof window innerWidth      number   x000D      return window innerWidth  gt  document documentElement clientWidth x000D   x000D       rootElem for quirksmode x000D    var rootElem   document documentElement    document body x000D   x000D       Check overflow style property on body for fauxscrollbars x000D    var overflowStyle x000D   x000D    if  typeof rootElem currentStyle      undefined   x000D      overflowStyle   rootElem currentStyle overflow x000D   x000D    overflowStyle   overflowStyle    window getComputedStyle rootElem      overflow x000D   x000D         Also need to check the Y axis overflow x000D    var overflowYStyle x000D   x000D    if  typeof rootElem currentStyle      undefined   x000D      overflowYStyle   rootElem currentStyle overflowY x000D   x000D    overflowYStyle   overflowYStyle    window getComputedStyle rootElem      overflowY x000D   x000D    var contentOverflows   rootElem scrollHeight  gt  rootElem clientHeight x000D    var overflowShown         visible auto    test overflowStyle        visible auto    test overflowYStyle  x000D    var alwaysShowScroll   overflowStyle      scroll     overflowYStyle      scroll  x000D   x000D    return  contentOverflows  amp  amp  overflowShown      alwaysShowScroll  x000D    x000D   x000D   x000D

User · Answer

try this   var hasVScroll   document body scrollHeight  gt  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  amp  amp  cStyle overflow     auto                    hasVScroll  amp  amp  cStyle overflowY     auto

[javascript] Detect if a page has a vertical scrollbar?

Examples related to javascript

Examples related to jquery

Examples related to scroll