Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <blockquote> <p>get the total page height/width</p> </blockquote> <p>Just use <code>document.documentElement.scrollWidth</code> and <code>scrollHeight</code></p> <blockquote> <p>the viewport size</p> </blockquote> <p>There're 2 sizes: with or without scrollbars. To get viewport size <em>with</em> scrollbars, use:</p> <p><code>var viewportWidthWithScrollbars = window.innerWidth || document.documentElement.offsetWidth;</code> (change to <code>innerHeight</code> and <code>offsetHeight</code> for height)</p> <p><code>innerWidth</code> is for W3C browsers and <code>offsetWidth</code> for IE in standard mode.</p> <p>To get the viewport size <em>without</em> scrollbars (that is what you probably need), use:</p> <p><code>var viewportWidthWithoutScrollbars = document.documentElement.clientWidth;</code></p> <blockquote> <p>the amount of vertial/horizontal scrolling</p> </blockquote> <p>This is the tricky part. All browsers except for Chrome use <code>documentElement.scrollLeft</code> and Chrome (and IE in quirks mode) uses <code>document.body.scrollLeft</code>, so we have to check both values:</p> <p><code>var pageScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;</code></p> <p>I tested these methods in W3C-compatible browsers (Opera, FF, Chrome) and IE 8 with doctype (i.e. only in standard-compiant mode). I didn't test the code in quirks mode, but it's very bad idea to use quirks mode anyway. If you still want to use it, I guess you have to check properties for <code>body</code> instead of <code>documentElement</code>.</p> <p>I took this page for reference: <a href="http://www.quirksmode.org/dom/w3c_cssom.html" rel="nofollow">http://www.quirksmode.org/dom/w3c_cssom.html</a></p> <p>You can use this page for testing in any other browser: <a href="http://jsbin.com/obewib/1" rel="nofollow">http://jsbin.com/obewib/1</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload