Force scrollbar with CSS

t0b1 (T.B.) — Sun, 06 Apr 2008 21:11:26 GMT

// Force Scrollbar



html {overflow: scroll}

get size of scrollbar

superjoe (joe) — Tue, 14 Nov 2006 04:30:22 GMT

// description of your code here
from http://www.fleegix.org/articles/2006/05/30/getting-the-scrollbar-width-in-pixels



function getScrollerWidth() {

    var scr = null;

    var inn = null;

    var wNoScroll = 0;

    var wScroll = 0;



    // Outer scrolling div

    scr = document.createElement('div');

    scr.style.position = 'absolute';

    scr.style.top = '-1000px';

    scr.style.left = '-1000px';

    scr.style.width = '100px';

    scr.style.height = '50px';

    // Start with no scrollbar

    scr.style.overflow = 'hidden';



    // Inner content div

    inn = document.createElement('div');

    inn.style.width = '100%';

    inn.style.height = '200px';



    // Put the inner div in the scrolling div

    scr.appendChild(inn);

    // Append the scrolling div to the doc

    document.body.appendChild(scr);



    // Width of the inner div sans scrollbar

    wNoScroll = inn.offsetWidth;

    // Add the scrollbar

    scr.style.overflow = 'auto';

    // Width of the inner div width scrollbar

    wScroll = inn.offsetWidth;



    // Remove the scrolling div from the doc

    document.body.removeChild(

        document.body.lastChild);



    // Pixel width of the scroller

    return (wNoScroll - wScroll);

}

DZone Snippets: scrollbar code

Force scrollbar with CSS

get size of scrollbar