How to calculate the width of a scrollbar in browsers Back

function getScrollbarWidth() {
    var outer = document.createElement('div');
    outer.style.visibility = 'hidden';
    outer.style.width = '100px';
    outer.style.msOverflowStyle = 'scrollbar'; /** needed for WinJS apps */

    document.body.appendChild(outer);

    var widthNoScroll = outer.offsetWidth;
    /** force scrollbars */
    outer.style.overflow = 'scroll';

    /** add innerdiv */
    var inner = document.createElement('div');
    inner.style.width = '100%';
    outer.appendChild(inner);        

    var widthWithScroll = inner.offsetWidth;

    /** remove divs */
    outer.parentNode.removeChild(outer);

    return widthNoScroll - widthWithScroll;
}

If you want to calculate with jQuery, use the following snippet:

function getScrollbarWidth() {
    var parent = $('<div style="'
           + 'width: 50px;'
           + 'height: 50px;'
           + 'overflow: auto'
           + '"><div/></div>')
        .appendTo('body');
    var child  = parent.children();
    var width  = child.innerWidth() - child.height(99).innerWidth();

    parent.remove();

    return width;
}

Comments Copyright © aleen42 all right reserved, powered by aleen42

Empty Comments

Sign in GitHub

As the plugin is integrated with a code management system like GitLab or GitHub, you may have to auth with your account before leaving comments around this article.

Notice: This plugin has used Cookie to store your token with an expiration.

authorize