get browser width another solution

[newbie78]

it would seem to me to add to the core or more not badly

Document.implement({
    getScrollWidth: function(){
        var scrollDiv=new Element('div',{
            styles:{
                width: '100px',
                height: '100px',
                overflow: 'scroll',
                position: 'absolute',
                top: '-9999px'
            }
        }).inject($(document.body));
        var scrollbarWidth=scrollDiv.offsetWidth-scrollDiv.clientWidth;
        scrollDiv.destroy();
        return scrollbarWidth;
    },
});

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/10515827-get-browser-width-another-solution?utm_campaign=plugin&utm_content=tracker%2F22067&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F22067&utm_medium=issues&utm_source=github).

[SergioCrisostomo]

@newbie78 thank you for the suggestion!

Personally I don't think this should be part of Core. Adding a div to the DOM should be avoided, even if its a valid way to retrieve the scroll-bar width. Reminds me of this other way in Stackoverfow. Maybe this would fit More, or a separate plugin better than Core.

I will close this soon if no one has a different opinion.

[DimitarChristoff]

this won't scale as you can override scrollbar widths on a per-element basis based upon cascading styles.

eg.

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.dark ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

... which means you can only truly measure scrollbar width on an element by injecting exactly where the element is (hopefully not in conflict with n-th child selectors)... I'd write this as a plugin or possibly mootools-more - extending http://mootools.net/more/docs/1.5.1/Element/Element.Measure