Skip to content

Instantly share code, notes, and snippets.

@sttk

sttk/windowScrollSize.html

Last active March 31, 2017 12:37
Show Gist options
  • Save sttk/0b22a07cac46e162c6c1c711d468b80f to your computer and use it in GitHub Desktop.
Save sttk/0b22a07cac46e162c6c1c711d468b80f to your computer and use it in GitHub Desktop.
Download ZIP
Window Scroll Size
Raw
windowScrollSize.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Window Scroll Size</title>
<style>
html { font-size: 12px; margin: 1px; padding: 2px; border: solid 3px red; }
body { margin: 4px; padding: 6px; }
body { width: 2000px; height: 2000px; }
body { border: solid 6px blue; }
article { position: fixed; }
section.flex { display: flex; }
section.flex > section { padding: 0.2rem; margin: 0rem 2rem; }
section.flex > section:first-of-type { margin-left: 0.5rem; }
h2 { white-space: nowrap; }
section > div { white-space: nowrap; }
</style>
</head>
<body>
<article>
<section class="flex">
<section id="windowObjectPropertySection">
<h2>window Object</h2>
<script>
(function() {
var props = [
'innerWidth', 'innerHeight', 'outerWidth', 'outerHeight',
'pageXOffset', 'pageYOffset',
'screenX', 'screenY', 'screenLeft', 'screenTop',
'scrollX', 'scrollY', 'scrollLeft', 'scrollTop',
];
props.forEach(function(prop) {
document.writeln('<div>window.' + prop + ' = <span id="id-window-' +
prop + '"></span></div>');
});
function showProps(event) {
props.forEach(function(prop) {
var elm = document.getElementById('id-window-' + prop);
if (elm) {
elm.innerText = window[prop];
}
});
}
showProps();
window.addEventListener('load', showProps);
window.addEventListener('resize', showProps);
window.addEventListener('scroll', showProps);
}());
</script>
</section>
<section id="htmlElementPropertySection">
<h2>html Element</h2>
<script>
(function() {
var props = [
'offsetWidth', 'offsetHeight', 'clientWidth', 'clientHeight',
'scrollWidth', 'scrollHeight', 'scrollLeft', 'scrollTop',
];
props.forEach(function(prop) {
document.writeln('<div>html.' + prop + ' = <span id="id-html-' +
prop + '"></span></div>');
});
var styles = [
'marginLeft', 'marginTop', 'marginRight', 'marginBottom',
'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom',
'borderLeftWidth', 'borderTopWidth', 'borderRightWidth',
'borderBottomWidth',
];
styles.forEach(function(style) {
document.writeln('<div>html.style.' + style + ' = <span id="id-html-' +
style + '"></span></div>');
});
var html = document.getElementsByTagName('html')[0];
function showProps() {
props.forEach(function(prop) {
var elm = document.getElementById('id-html-' + prop);
if (elm) {
elm.innerText = html[prop];
}
});
var cs = window.getComputedStyle(html);
styles.forEach(function(style) {
var elm = document.getElementById('id-html-' + style);
if (elm) {
elm.innerText = cs[style];
}
});
}
showProps();
window.addEventListener('load', showProps);
window.addEventListener('resize', showProps);
window.addEventListener('scroll', showProps);
}());
</script>
</section>
<section id="documentElementPropertySection">
<h2>documentElement Element</h2>
<script>
(function() {
var props = [
'offsetWidth', 'offsetHeight', 'clientWidth', 'clientHeight',
'scrollWidth', 'scrollHeight', 'scrollLeft', 'scrollTop',
];
props.forEach(function(prop) {
document.writeln('<div>documentElement.' + prop + ' = <span id="id-doc-' +
prop + '"></span></div>');
});
var styles = [
'marginLeft', 'marginTop', 'marginRight', 'marginBottom',
'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom',
'borderLeftWidth', 'borderTopWidth', 'borderRightWidth',
'borderBottomWidth',
];
styles.forEach(function(style) {
document.writeln('<div>documentElement.style.' + style +
' = <span id="id-doc-' + style + '"></span></div>');
});
function showProps(event) {
props.forEach(function(prop) {
var elm = document.getElementById('id-doc-' + prop);
if (elm) {
elm.innerText = document.documentElement[prop];
}
});
var cs = window.getComputedStyle(document.documentElement);
styles.forEach(function(style) {
var elm = document.getElementById('id-doc-' + style);
if (elm) {
elm.innerText = cs[style];
}
});
}
showProps();
window.addEventListener('load', showProps);
window.addEventListener('resize', showProps);
window.addEventListener('scroll', showProps);
}());
</script>
</section>
<section id="bodyElementPropertySection">
<h2>body Element</h2>
<script>
(function() {
var props = [
'offsetWidth', 'offsetHeight', 'clientWidth', 'clientHeight',
'scrollWidth', 'scrollHeight', 'scrollLeft', 'scrollTop',
];
props.forEach(function(prop) {
document.writeln('<div>body.' + prop + ' = <span id="id-body-' + prop +
'"></span></div>');
});
var styles = [
'marginLeft', 'marginTop', 'marginRight', 'marginBottom',
'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom',
'borderLeftWidth', 'borderTopWidth', 'borderRightWidth',
'borderBottomWidth',
];
styles.forEach(function(style) {
document.writeln('<div>body.style.' + style + ' = <span id="id-body-' +
style + '"></span></div>');
});
function showProps(event) {
props.forEach(function(prop) {
var elm = document.getElementById('id-body-' + prop);
if (elm) {
elm.innerText = document.body[prop];
}
});
var cs = window.getComputedStyle(document.body);
styles.forEach(function(style) {
var elm = document.getElementById('id-body-' + style);
if (elm) {
elm.innerText = cs[style];
}
});
}
showProps();
window.addEventListener('load', showProps);
window.addEventListener('resize', showProps);
window.addEventListener('scroll', showProps);
}());
</script>
</section>
</section>
<section id="windowScrollSizeSection">
<h2>Window Scroll Size</h2>
<script>
(function() {
var de = document.documentElement;
var body = document.body;
document.writeln('<div>maximum window scroll position = (' +
'<span id="id-window-scroll-max"></span>' +
')</div>');
document.writeln('<div>window scrollable = (' +
(body.scrollWidth - de.clientWidth) +
', ' +
(body.scrollHeight - de.clientHeight) +
') - Chrome, Vivaldi, Safari, Edge</div>');
document.writeln('<div>window scrollable = (' +
(de.scrollWidth - de.clientWidth) +
', ' +
(de.scrollHeight - de.clientHeight) +
') - Firefox, IE11</div>');
var maxScrollX = 0, maxScrollY = 0;
function showProps(event) {
maxScrollX = Math.max(maxScrollX, window.pageXOffset);
maxScrollY = Math.max(maxScrollY, window.pageYOffset);
var elm = document.getElementById('id-window-scroll-max');
elm.innerText = maxScrollX + ', ' + maxScrollY;
}
showProps();
window.addEventListener('load', showProps);
window.addEventListener('resize', showProps);
window.addEventListener('scroll', showProps);
}());
</script>
</section>
</article>
</body>
</html>
Raw
windowScrollSize.md

Window Scroll Size

About scroll size

Scroll size (.scrollWidth/.scrollHeight) is the entire content size of an element. This size includes padding, but not margin, scrollbar or border.

How to get window's scroll size

When the browser is Chrome, Vivaldi, Safari or Edge:

var scrollWidth = document.body.scrollWidth
var scrollHeight = document.body.scrollHeight

When the browser is Firefox, IE11

var scrollWidth = document.documentElement.scrollWidth
var scrollHeight = document.documentElement.scrollHeight

How to get maximum scroll position

When the browser is Chrome, Vivaldi, Safari or Edge:

var maxScrollLeft = document.body.scrollWidth - document.documentElement.clientWidth
var maxScrollTop = document.body.scrollHeight -
document.documentElement.clientHeight

When the browser is Firefox, IE11

var maxScrollLeft = document.documentElement.scrollWidth - document.documentElement.clientWidth
var maxScrollTop = document.documentElement.scrollHeight -
document.documentElement.clientHeight
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment