Capture document width with scrollbar

Question

Capture document width with scrollbar

Navigation

#1 by (1 votes)

0

Good afternoon,

I'm making a responsive website where I use CSS with media="screen" and jQuery.

Problem:
However Javascript and CSS do not recognize the same document width value when the page has a scroll bar (when I test in Chrome using Adaptive Design Mode - Ctrl + Shift + M - it works fine) mobile devices and other devices, not having the scroll bar.

Example:
If you run a alert ($(window).width()); to display the width of a scrollbar document on a desktop with a resolution of 1920/1080, it will bring the following response 1903 instead of 1920

Doubt:
Is there a way to grab a window's width from a scrolling page, or to make both Javascript and CSS recognize the width of the document as being the same on the desktop?

javascript html jquery css mobile

asked by anonymous 03.08.2016 / 20:44

1 answer

JQuery - Compare 2 arrays in one each Make a query with laravel with the following logic

score 1 · Accepted Answer

You can solve your problem like this:

        $(function(){
            var hasScroll= document.body.scrollHeight > document.body.clientHeight;
            if (hasScroll) {
                // Aqui são suas definições/regras se existe a barra de rolagem
                var widthPage = ($(window).width() + 17);
                console.log(widthPage);
            }else{
                // Aqui são suas definições/regras se NÃO existe a barra de rolagem
                var widthPage = ($(window).width());
                console.log(widthPage);
            }
        });

With this you get the width of the page + the width of the scroll bar. With this solution you also check whether or not the scroll bar exists.
I hope I have helped.