Getting scroll bar width using JavaScript

Question

The following HTML will display a scroll bar on the right inside edge of div container   Is it possible to determine the width of that scroll bar    lt div class  container  style  overflow-y auto  height 40px   gt     lt div class  somethingBig  gt  lt  div gt   lt  div gt

User · Answer

If the child takes the full width of the container excluding scrollbar  the default   then you can subtract the widths   var child   document querySelector   somethingBig    var scrollbarWidth   child parentNode offsetWidth - child offsetWidth

User · Answer

This function should give you width of scrollbar  function getScrollbarWidth           Creating invisible container   const outer   document createElement  div      outer style visibility    hidden     outer style overflow    scroll      forcing scrollbar to appear   outer style msOverflowStyle    scrollbar      needed for WinJS apps   document body appendChild outer         Creating inner element and placing it in the container   const inner   document createElement  div      outer appendChild inner         Calculating difference between container s full width and the child width   const scrollbarWidth    outer offsetWidth - inner offsetWidth         Removing temporary elements from the DOM   outer parentNode removeChild outer      return scrollbarWidth       Basic steps here are    Create hidden div  outer  and get it s offset width Force scroll bars to appear in div  outer  using CSS overflow property Create new div  inner  and append to outer  set its width to  100   and get offset width Calculate scrollbar width based on gathered offsets   Working example here  http   jsfiddle net slavafomin tsrmgcu9   Update  If you re using this on a Windows  metro  App  make sure you set the -ms-overflow-style property of the  outer  div to scrollbar  otherwise the width will not be correctly detected   code updated   Update  2 This will not work on Mac OS with the default  Only show scrollbars when scrolling  setting  Yosemite and up

User · Answer

I ve used next function to get scrollbar height width   function getBrowserScrollSize         var css              border     none            height     200px            margin     0            padding    0            width      200px              var inner       lt div gt    css   extend     css        var outer       lt div gt    css   extend            left          -1000px            overflow      scroll            position      absolute            top           -1000px         css   append inner  appendTo  body        scrollLeft 1000       scrollTop 1000        var scrollSize              height    outer offset   top - inner offset   top     0           width    outer offset   left - inner offset   left     0             outer remove        return scrollSize      This jQuery-based solutions works in IE7  and all other modern browsers  including mobile devices where scrollbar height width will be 0

User · Answer

offsetWidth includes width of scroll bar and clientWidth doesn t  As rule  it equals 14-18px  so    var scrollBarWidth   element offsetWidth - element clientWidth

User · Answer

this worked for me      function getScrollbarWidth          var div       lt div style  width 50px height 50px overflow hidden position absolute top -200px left -200px   gt  lt div style  height 100px   gt  lt  div gt             body   append div        var w1      div   div  innerWidth         div css  overflow-y    scroll         var w2      div   div  innerWidth           div  remove         return  w1 - w2

User · Answer

Assuming container is only on page once and you are using jQuery  then   var containerEl       container   0   var scrollbarWidth   containerEl offsetWidth - containerEl clientWidth    Also see this answer for more details

User · Answer

Here s an easy way using jQuery   var scrollbarWidth   jQuery  div withScrollBar   get 0  scrollWidth - jQuery  div withScrollBar   width      Basically we subtract the scrollable width from the overall width and that should provide the scrollbar s width  Of course  you d want to cache the jQuery  div withScrollBar   selection so you re not doing that part twice

User · Answer

I think this will be simple and fast -  var scrollWidth  window innerWidth-  document  width

User · Answer

If you use jquery ui  try this code     position scrollbarWidth

[javascript] Getting scroll bar width using JavaScript

Examples related to javascript