This particular code snippet is used to retrieve the precise height of a document in HTML.
The values returned by this code can vary across different browsers:
firefox: 5321
Chrome, Opera: 4796
IE: 4901
I am seeking guidance on whether this method is accurate, or if there is a better approach available that covers most major browsers with their latest versions.
getDocDimensions: function () {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight));
},
You can access the full code and live preview here.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Content</title>
<script type="text/javascript">
window.app = {
getDocDimensions: function () {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight));
},
start: function () {
window.onscroll = function (event) {
console.log(this.getDocDimensions());
//console.log(window.screenTop);
//console.log(window.scrollMaxY);
//console.log(document.documentElement.scrollHeight);
//console.log(document.documentElement.clientHeight);
//console.log(document.body.scrollHeight);
//console.log('+++++++++++++++++++++++++++');
}.bind(this);
}
};
</script>
<style>
#result {
position: fixed;
top: 10px;
background-color: coral;
}
body {
background-color: lightslategray;
}
#content {
position: static;
top: 0;
width: 980px;
margin: 0 auto;
background-color: cadetblue;
}
#parent {
position: absolute;
top: 0;
background-color: green;
}
#child {
position: absolute;
width: 500px;
}
</style>
</head>
<body onload="window.app.start();">
<div id="result"></div>
<div id="content">
<div id="parent">
<div id="child">
<h1>Hello</h1>
<!-- Lorem Ipsum text goes here -->
</div>
</div>
</div>
</body>
</html>