Getting Scroll Bar Width Using JavaScript

Getting scroll bar width using JavaScript

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:

1. Create hidden div (outer) and get it's offset width
2. Force scroll bars to appear in div (outer) using CSS overflow property
3. Create new div (inner) and append to outer, set its width to '100%' and get offset width
4. 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).

CSS: How to get browser scrollbar width? (for :hover {overflow: auto} nice margins)

Scrollbar widths can vary between browsers and operating systems, and unfortunately CSS does not provide a way to detect those widths: we need to use JavaScript.

Other people have solved this problem by measuring the width of the scrollbar on an element:

• http://davidwalsh.name/detect-scrollbar-width (original post)
• http://jsfiddle.net/a1m6an3u/ (live example)

We create a div .scrollbar-measure, add a scrollbar, and return its size.

// Create the div
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);

// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.warn(scrollbarWidth);

// Delete the div
document.body.removeChild(scrollDiv);

This is fairly straightforward, but it is (obviously) not pure CSS.

div scrollbar width

if you're using jquery, try this:

function getScrollbarWidth() 
{
    var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div></div>'); 
    $('body').append(div); 
    var w1 = $('div', div).innerWidth(); 
    div.css('overflow-y', 'auto'); 
    var w2 = $('div', div).innerWidth(); 
    $(div).remove(); 
    return (w1 - w2);
}

i'm using this in the project i'm working on and it works like a charm. it gets the scrollbar-width by:

1. appending a div with overflowing content to the body (in a non-visible area, -200px to top/left)
2. set overflow to hidden
3. get the width
4. set overflow to auto (to get scrollbars)
5. get the width
6. substract both widths to get width of the scrollbar

so what you'll have to do is getting the width of your div ($('#mydiv').width()) and add the scrollbar-width:

var completewidth = $('#mydiv').width() + getScrollbarWidth();

How to calculate the width of the scroll bar?

There is a jQuery plugin that can help with this: https://github.com/brandonaaron/jquery-getscrollbarwidth/blob/master/jquery.getscrollbarwidth.js

Also, from http://www.alexandre-gomes.com/?p=115
Here is some code that may help.

This creates a hidden <p> element at 100% width inside a <div> with a scrollbar, then calculates the <div> width - the <p> width = scroll bar width.

function getScrollBarWidth () { 
  var inner = document.createElement('p'); 
  inner.style.width = "100%"; 
  inner.style.height = "200px"; 

  var outer = document.createElement('div'); 
  outer.style.position = "absolute"; 
  outer.style.top = "0px"; 
  outer.style.left = "0px"; 
  outer.style.visibility = "hidden"; 
  outer.style.width = "200px"; 
  outer.style.height = "150px"; 
  outer.style.overflow = "hidden"; 
  outer.appendChild (inner); 

  document.body.appendChild (outer); 
  var w1 = inner.offsetWidth; 
  outer.style.overflow = 'scroll'; 
  var w2 = inner.offsetWidth; 
  if (w1 == w2) w2 = outer.clientWidth; 

  document.body.removeChild (outer); 

  return (w1 - w2); 
}; 

How to increase width of the scroll bar when user hover's on it

Try This:-

document.addEventListener("mousemove", function(e){
        let ele = document.getElementById('element');
        let distance = ele.offsetLeft + ele.offsetWidth - e.pageX;
        distance < 15 && distance > -15 ? ele.classList.add('more-width') : ele.classList.remove('more-width');
    });

#element {
     position: relative;
     left: 150px;
     top: 150px;
     width: 200px;
     max-height: 200px;
     background-color: rgba(255, 0, 0, 0.55);
     overflow: auto;
}
 #element::-webkit-scrollbar-thumb {
     background: #888;
}
 #element::-webkit-scrollbar {
     width: 5px;
}
 #element.more-width::-webkit-scrollbar {
     width: 20px;
}
 

<div id="element">
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
</div>

How can I get the browser's scrollbar sizes?

From Alexandre Gomes Blog I have not tried it. Let me know if it works for you.

function getScrollBarWidth () {
  var inner = document.createElement('p');
  inner.style.width = "100%";
  inner.style.height = "200px";

  var outer = document.createElement('div');
  outer.style.position = "absolute";
  outer.style.top = "0px";
  outer.style.left = "0px";
  outer.style.visibility = "hidden";
  outer.style.width = "200px";
  outer.style.height = "150px";
  outer.style.overflow = "hidden";
  outer.appendChild (inner);

  document.body.appendChild (outer);
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  document.body.removeChild (outer);

  return (w1 - w2);
};

window.innerWidth includes the scroll-bar width

using jquery $(window).width() will return what you want.

if your document has horizontal scroll $(document).width() will return the document width instead of window.

Edit:
useing pure javascript, you can extract document from main window using documentElement and this code works same:

document.documentElement.clientWidth

---

Related Topics