Jquery or pure js - determine the width of the scrollbar

Question

I have a vertical menu and I'm trying to find the best way to hide the scrollbar of that area but keep it scrollable. It works well by declaring via CSS the exact size, which in most cases is 17px but this doesn't help on mobiles and other devices.

How can I find the exact size of the scrollbar ( via jquery or pure js ) and use the same amount of px for the padding of .scrollable-box and the negative margin of .scrollable-inner ?

jsfiddle

body {
    background: #eee;
    font-family: sans-serif;
}

div.sidebar {
    padding: 0;
    padding-bottom: 60px;
    border: 1px solid #ccc;
    background: #fff;
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 280px;
    overflow: hidden;
    height:300px;
}
div#fixed {
    background: #76a7dc;
    padding-bottom: 10px;
    color: #fff;
    padding: 10px;
    text-align: center;
}

div.scrollable-box {
    height: 100%;  
    overflow-y: scroll;    
    width: 100%;
    padding-top:20px;
    padding-right: 17px;     
}

div.scrollable-inner {
    margin-right: -17px;
}

<div class="sidebar">
    <div id="fixed">
        Fixed content here       
    </div>

    <div class="scrollable-box">
      <div class="scrollable-inner">
        Scrolling content<br><br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

       </div>
    </div>
</div>

If you hide the scrollbar - why do you care about it's size? — Dekel, May 26 '17 at 12:02
He's hiding it by shoving it outside the viewable area, so he needs to know how far to shove it. — Daniel Beck, May 26 '17 at 12:03

score 0 · Answer 1 · answered May 26 '17 at 12:07

I once saw this somewhere and I remember Gomes came up with a bright idea of achieving it

According to his blog:

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);  
};

This can really help you, please let me know if you don't understand his code.

link: http://www.alexandre-gomes.com/?p=115

score 0 · Answer 2 · answered May 26 '17 at 13:25

Based on this, i found the solution:

// Create the measurement node
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); // Mac:  15

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

$('div.scrollable-box').css('padding-right', scrollbarWidth);
$('div.scrollable-inner').css('margin-right',-scrollbarWidth);

Working jsfiddle

Jquery or pure js - determine the width of the scrollbar

2 Answers2