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.
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.
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.
Use window. innerWidth and window. innerHeight to get the current screen size of a page.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With