Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get browser window width including scrollbar

I tried to get browser window width with $(window).width();. On IE 10, it does return the full browser width, include the scroll bar. However, on Firefox and Chrome, both return the value without the scroll bar.

How can I get the browser width include with the scroll bar together? Because I need the detected width to be exactly same as CSS.

Thanks.

like image 650
user1995781 Avatar asked Oct 25 '13 06:10

user1995781


People also ask

Does view width include scrollbar?

Many assume that width: 100vw is the same as width: 100% . This is true on a page that doesn't scroll vertically, but what you might not realize is that the viewport actually includes the scrollbars, too.

Does window innerWidth include scrollbar?

window. innerWidth/innerHeight includes the scrollbar. In most cases, we need the available window width in order to draw or position something within scrollbars (if there are any), so we should use documentElement.

How do I find my browser window width?

Use window. innerWidth and window. innerHeight to get the current screen size of a page.

What is window innerHeight?

innerHeight. The read-only innerHeight property of the Window interface returns the interior height of the window in pixels, including the height of the horizontal scroll bar, if present. The value of innerHeight is taken from the height of the window's layout viewport.


1 Answers

The first answer was close, but upon further inspection it is a bit more complicated. The body.clientWidth is the width excluding the scrollbars. The window.outerWidth is the width including the scrollbars and other window elements like the window border. The window.innerWidth is the actual width of the window, including scrollbars, but not including the window border.

enter image description here

like image 190
Jamie Thomas Avatar answered Sep 22 '22 09:09

Jamie Thomas