How can I check if a scrollbar is visible

Question

Is it possible to check the overflow auto of a div   For example   HTML   lt div id  my div  style  width  100px  height 100px  overflow auto   class  my class  gt       content  lt  div gt    JQUERY      my class   live  hover   function  event        if  event type     mouseenter                  if       if scrollbar visible                                alert  true                        else                        alert  false                            Sometimes is the content short  no scrollbar  and sometimes long  scrollbar visible

User · Answer

Most of the answers presented got me close to where I needed to be, but not quite there.

We basically wanted to assess if the scroll bars -would- be visible in a normal situation, by that definition meaning that the size of the body element is larger than the view port. This was not a presented solution, which is why I am submitting it.

Hopefully it helps someone!

(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > $(window).height();
    }
})(jQuery);

Essentially, we have the hasScrollbar function, but returning if the requested element is larger than the view port. For view port size, we just used $(window).height(). A quick compare of that against the element size, yields the correct results and desirable behavior.

User · Answer

a little plugin for it   function            fn hasScrollBar   function             return this get 0  scrollHeight  gt  this height             jQuery    use it like this      my div1   hasScrollBar       returns true if there s a  vertical  scrollbar  false otherwise    tested working on Firefox  Chrome  IE6 7 8 but not working properly on body tag selector demo  Edit I found out that when you have horizontal scrollbar that causes vertical scrollbar to appear  this function does not work     I found out another solution    use clientHeight return this get 0  scrollHeight  gt  this get 0  clientHeight

User · Answer

Find a parent of current element that has vertical scrolling or body     fn scrollableParent   function         var  parents   this parents         var  scrollable    parents filter function idx            return this scrollHeight  gt  this offsetHeight  amp  amp  this offsetWidth     this clientWidth         first         if   scrollable length     0             scrollable      html  body              return  scrollable       It may be used to autoscroll to current element via   var  scrollable    elem scrollableParent     scrollable scrollTop  elem position   top

User · Answer

The first solution above works only in IE The second solution above works only in FF  This combination of both functions works in both browsers     Firefox Only   if    document  height    gt    window  height             has scrollbar         mtc   addClass  AdjustOverflowWidth        alert  scrollbar present - Firefox      else           mtc   removeClass  AdjustOverflowWidth         Internet Explorer Only    function            fn hasScrollBar   function             return this get 0  scrollHeight  gt  this innerHeight             jQuery   if      monitorWidth1   hasScrollBar             has scrollbar         mtc   addClass  AdjustOverflowWidth        alert  scrollbar present - Internet Exploder      else           mtc   removeClass  AdjustOverflowWidth          Wrap in a document ready monitorWidth1   the div where the overflow is set to auto mtc   a container div inside monitorWidth1 AdjustOverflowWidth   a css class applied to the  mtc div when the Scrollbar is active  Use the alert to test cross browser  and then comment out for final production code    HTH

User · Answer

scrollWidth Height - clientWidth Height  is a good indicator for the presence of a scrollbar  but it will give you a  false positive  answer on many occasions  if you need to be accurate i would suggest using the following function  instead of trying to guess if the element is scrollable - you can scroll it      x000D   x000D  function isScrollable  el    x000D    var y1   el scrollTop  x000D    el scrollTop     1  x000D    var y2   el scrollTop  x000D    el scrollTop  -  1  x000D    var y3   el scrollTop  x000D    el scrollTop     y1  x000D    var x1   el scrollLeft  x000D    el scrollLeft    1  x000D    var x2   el scrollLeft  x000D    el scrollLeft -  1  x000D    var x3   el scrollLeft  x000D    el scrollLeft    x1  x000D    return   x000D      horizontallyScrollable  x1     x2    x2     x3  x000D      verticallyScrollable  y1     y2    y2     y3 x000D      x000D    x000D  function check  id    x000D    alert  JSON stringify  isScrollable  document getElementById  id       x000D    x000D   outer1   outer2   outer3   x000D    background-color  pink  x000D    overflow  auto  x000D    float  left  x000D    x000D   inner   x000D    width   150px  x000D    height  150px  x000D    x000D  button    margin  2em 0 0 1em    x000D   lt div id  outer1  style  width  100px  height  100px   gt  x000D     lt div id  inner  gt  x000D       lt button onclick  check  outer1    gt check if lt br gt scrollable lt  button gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt div id  outer2  style  width  200px  height  100px   gt  x000D     lt div id  inner  gt  x000D       lt button onclick  check  outer2    gt check if lt br gt scrollable lt  button gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt div id  outer3  style  width  100px  height  180px   gt  x000D     lt div id  inner  gt  x000D       lt button onclick  check  outer3    gt check if lt br gt scrollable lt  button gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I m going to extend on this even further for those poor souls who  like me  use one of the modern js frameworks and not JQuery and have been wholly abandoned by the people of this thread    this was written in Angular 6 but if you write React 16  Vue 2  Polymer  Ionic  React-Native  you ll know what to do to adapt it  And it s the whole component so it should be easy   import  ElementRef  AfterViewInit  from   angular core     Component     selector   app     templateUrl     app html     styleUrls      app scss      export class App implements AfterViewInit   scrollAmount   constructor    private fb  FormBuilder    private element  ElementRef        ngAfterViewInit      this scrollAmount   this element nativeElement querySelector   elem-list      this scrollAmount addEventListener  wheel   e   gt      you can put    instead of e      but e is usefull if you require the deltaY amount      if this scrollAmount scrollHeight  gt  this scrollAmount offsetHeight             there is a scroll bar  do something       else            there is NO scroll bar  do something                    in the html there would be a div with class  elem-list  which is stylized in the css or scss to have a height and an overflow value that isn t hidden   so auto or sroll    I trigger this eval upon a scroll event because my end goal was to have  automatic focus scrolls  which decide whether they are scrolling the whole set of components horizontally if said components have no vertical scroll available and otherwise only scroll the innards of one of the components vertically   but you can place the eval elsewhere to have it be triggered by something else   the important thing to remember here  is you re never Forced back into using JQuery  there s always a way to access the same functionalities it has without using it

User · Answer

I made a new custom  pseudo selector for jQuery to test whether an item has one of the following css properties     overflow   scroll auto  overflow-x   scroll auto  overflow-y   scroll auto    I wanted to find the closest scrollable parent of another element so I also wrote another little jQuery plugin to find the closest parent with overflow   This solution probably doesn t perform the best  but it does appear to work  I used it in conjunction with the   scrollTo plugin  Sometimes I need to know whether an element is inside another scrollable container  In that case I want to scroll the parent scrollable element vs the window   I probably should have wrapped this up in a single plugin and added the psuedo selector as a part of the plugin  as well as exposing a  closest  method to find the closest  parent  scrollable container   Anywho    here it is     isScrollable jQuery plugin     fn isScrollable   function        var elem     this       return       elem css  overflow       scroll             elem css  overflow       auto             elem css  overflow-x       scroll             elem css  overflow-x       auto             elem css  overflow-y       scroll             elem css  overflow-y       auto                  scrollable   jQuery pseudo selector     expr      scrollable   function a        var elem     a       return elem isScrollable           scrollableparent   jQuery plugin     fn scrollableparent   function        return   this  closest   scrollable        window     default to    html   instead       Implementation is pretty simple    does a specific element have overflow scroll  var somedivIsScrollable     this  isScrollable      use  scrollable psuedo selector to find a collection of child scrollable elements var scrollableChildren     this  find   scrollable      use   scrollableparent to find closest scrollable container var scrollableparent     this  scrollableparent      UPDATE  I found that Robert Koritnik already came up with a much more powerful  scrollable pseudo selector that will identify the scrollable axes and height of scrollable containers  as a part of his   scrollintoview   jQuery plugin  scrollintoview plugin  Here is his fancy pseudo selector  props          extend   expr              scrollable  function  element  index  meta  stack             var direction   converter typeof  meta 3        string   amp  amp  meta 3  toLowerCase       converter both           var styles    document defaultView  amp  amp  document defaultView getComputedStyle   document defaultView getComputedStyle element  null    element currentStyle            var overflow                  x  scrollValue styles overflowX toLowerCase       false               y  scrollValue styles overflowY toLowerCase       false               isRoot  rootrx test element nodeName                            check if completely unscrollable  exclude HTML element because it s special           if   overflow x  amp  amp   overflow y  amp  amp   overflow isRoot                          return false                        var size                  height                     scroll  element scrollHeight                   client  element clientHeight                              width                     scroll  element scrollWidth                   client  element clientWidth                                 check overflow x y because iPad  and possibly other tablets  don t dislay scrollbars              scrollableX  function                       return  overflow x    overflow isRoot   amp  amp  this width scroll  gt  this width client                               scrollableY  function                       return  overflow y    overflow isRoot   amp  amp  this height scroll  gt  this height client                                      return direction y  amp  amp  size scrollableY      direction x  amp  amp  size scrollableX

User · Answer

A No Framework JavaScript Approach  checks for both vertical and horizontal         hasScrollBars        Checks to see if an element has scrollbars         returns  object      Element prototype hasScrollBars   function         return   vertical   this scrollHeight  gt  this style height   horizontal   this scrollWidth  gt  this style width       Use it like this  if document getElementsByTagName  body   0  hasScrollBars   vertical               alert  vertical               if document getElementsByTagName  body   0  hasScrollBars   horizontal               alert  horizontal

User · Answer

You can do this using a combination of the Element scrollHeight and Element clientHeight attributes  According to MDN   The Element scrollHeight read-only attribute is a measurement of the height of an element s content  including content not visible on the screen due to overflow  The scrollHeight value is equal to the minimum clientHeight the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar  It includes the element padding but not its margin   And   The Element clientHeight read-only property returns the inner height of an element in pixels  including padding but not the horizontal scrollbar height  border  or margin  clientHeight can be calculated as CSS height   CSS padding - height of horizontal scrollbar  if present    Therefore  the element will display a scrollbar if the scroll height is greater than the client height  so the answer to your question is  function scrollbarVisible element      return element scrollHeight  gt  element clientHeight

User · Answer

There s two area sizes to consider  the window and the html  If the html width  for example  is greater than window width then a scroll bar may be present on the user interface  So it s a matter of reading the window proportions and the html proportions and doing the basic math  As for displaying an arrow overlaid atop the page  that s done with a simple classlist toggle  e g   hidden display none  Here s a crossbrowser method for getting these proportions   credit W3 Schools      document body clientWidth   var h   window innerHeight    document documentElement clientHeight    document body clientHeight

User · Answer

Here s an improved version of Evan s answer which seems to properly account for overflow logic               function element scrollbars node                    var element     node                   var overflow x   element css  overflow-x                    var overflow y   element css  overflow-y                    var overflow   element css  overflow                    if  overflow x     undefined   overflow x                        if  overflow y     undefined   overflow y                        if  overflow     undefined   overflow                        if  overflow x        overflow x   overflow                  if  overflow y        overflow y   overflow                  var scrollbar vertical                          overflow y     scroll                                                                                   overflow y     hidden                                   overflow y     visible                                                      amp  amp                                 node scrollHeight  gt  node clientHeight                                                                                     var scrollbar horizontal                          overflow x     scroll                                                                                   overflow x     hidden                                   overflow x     visible                                                      amp  amp                                 node scrollWidth  gt  node clientWidth                                                                                     return                       vertical  scrollbar vertical                      horizontal  scrollbar horizontal

User · Answer

Ugh everyone s answers on here are incomplete  and lets stop using jquery in SO answers already please  Check jquery s documentation if you want info on jquery   Here s a generalized pure-javascript function for testing whether or not an element has scrollbars in a complete way      dimension - Either  y  or  x     computedStyles -  Optional  Pass in the domNodes computed styles if you already have it  since I hear its somewhat expensive  function hasScrollBars domNode  dimension  computedStyles        dimension   dimension toUpperCase       if dimension      Y             var length    Height        else           var length    Width             var scrollLength    scroll  length     var clientLength    client  length     var overflowDimension    overflow  dimension      var hasVScroll   domNode scrollLength   gt  domNode clientLength           Check the overflow and overflowY properties for  auto  and  visible  values     var cStyle   computedStyles    getComputedStyle domNode      return hasVScroll  amp  amp   cStyle overflowDimension      visible                              cStyle overflowDimension      auto                                          cStyle overflowDimension      scroll

User · Answer

The solutions provided above will work in the most cases  but checking the scrollHeight and overflow is sometimes not enough and can fail for body and html elements as seen here  https   codepen io anon pen EvzXZw 1  Solution - Check if the element is scrollable  function isScrollableY  element      return    element scrollTop       element scrollTop  amp  amp  element scrollTop--       Note  elements with overflow  hidden are also treated as scrollable  more info   so you might add a condition against that too if needed  function isScrollableY  element        let style   window getComputedStyle element       return    element scrollTop       element scrollTop  amp  amp  element scrollTop--                amp  amp  style  quot overflow quot        quot hidden quot   amp  amp  style  quot overflow-y quot        quot hidden quot      As far as I know this method only fails if the element has scroll-behavior  smooth  Explanation  The trick is  that the attempt of scrolling down and reverting it won t be rendered by the browser  The topmost function can also be written like the following   x000D   x000D  function isScrollableY  element         if scrollTop is not 0   larger than 0  then the element is scrolled and therefore must be scrollable      - gt  true     if  element scrollTop     0           if the element is zero it may be scrollable          - gt  try scrolling about 1 pixel     element scrollTop           if the element is zero then scrolling did not succeed and therefore it is not scrollable         - gt  false       if  element scrollTop     0  return false         else the element is scrollable  reset the scrollTop property        - gt  true     element scrollTop--        return true    x000D   x000D   x000D   2  Solution - Do all the necessary checks  function isScrollableY  element      const style   window getComputedStyle element        if  element scrollHeight  gt  element clientHeight  amp  amp        style  quot overflow quot        quot hidden quot   amp  amp  style  quot overflow-y quot        quot hidden quot   amp  amp        style  quot overflow quot        quot clip quot   amp  amp  style  quot overflow-y quot        quot clip quot            if  element     document scrollingElement  return true      else if  style  quot overflow quot        quot visible quot   amp  amp  style  quot overflow-y quot        quot visible quot              special check for body element  https   drafts csswg org cssom-view  potentially-scrollable        if  element     document body            const parentStyle   window getComputedStyle element parentElement           if  parentStyle  quot overflow quot        quot visible quot   amp  amp  parentStyle  quot overflow-y quot        quot visible quot   amp  amp              parentStyle  quot overflow quot        quot clip quot   amp  amp  parentStyle  quot overflow-y quot        quot clip quot                        return true                          else return true                 return false

User · Answer

Works on Chrome  Edge  Firefox and Opera  at least in the newer versions   Using JQuery     Setup this function to fix the footer   function fixFooterCaller         const body      body        const footer      body footer         return function                     If the scroll bar is visible         if    document  height    gt    window  height                             Reset             footer css  position    inherit                   Erase the padding added in the above code             body css  padding-bottom    0                         If the scrollbar is NOT visible         else                          Make it fixed at the bottom             footer css  position    fixed                   And put a padding to the body as the size of the footer                This makes the footer do not cover the content and when                it does  this event fix it             body css  padding-bottom   footer outerHeight                         It returns a function  Made this way just to set the body and footer once   And then  set this when the document is ready     document  ready function          const fixFooter   fixFooterCaller            Put in a timeout call instead of just call the fixFooter function        to prevent the page elements needed don t be ready at this time     setTimeout fixFooter  0          The function must be called every time the window is resized       window  resize fixFooter         Add this to your footer css   footer       bottom  0

User · Answer

Here s my improvement  added parseInt  for some weird reason it didn t work without it      usage  jQuery   my div1   hasVerticalScrollBar       Credit  http   stackoverflow com questions 4814398 how-can-i-check-if-a-scrollbar-is-visible  function            fn hasVerticalScrollBar   function             return this get 0    parseInt  this get 0  scrollHeight    gt  parseInt  this innerHeight       false            jQuery

User · Answer

Maybe a more simple solution   if    document  height    gt    window  height             scrollbar

User · Answer

This expands on  Reigel s answer  It will return an answer for horizontal or vertical scrollbars    function            fn hasScrollBar   function             var e   this get 0           return               vertical  e scrollHeight  gt  e clientHeight              horizontal  e scrollWidth  gt  e clientWidth                     jQuery     Example   element hasScrollBar                  Returns   vertical  true false  horizontal  true false   element hasScrollBar   vertical       Returns true false element hasScrollBar   horizontal     Returns true false

User · Answer

You need element scrollHeight  Compare it with   element  height

User · Answer

I should change a little thing of what Reigel said    function            fn hasScrollBar   function             return this 0    this 0  scrollHeight  gt  this innerHeight     false           jQuery     innerHeight counts control s height and its top and bottom paddings

[javascript] How can I check if a scrollbar is visible?

Examples related to javascript

Examples related to css

Examples related to dom

Examples related to scrollbar