|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"/> |
|
<style> |
|
html { font-size: 12px; } |
|
div.background-view { width: 1000px; height: 1000px; } |
|
div.print-area { position: fixed; top: 10px; left: 10px; padding: 10px; } |
|
</style> |
|
</head> |
|
<body> |
|
<div class="background-view"></div> |
|
<div class="print-area"> |
|
<div>body.offsetWidth = <span id="bodyWidth"></span> px</div> |
|
<div>body.offsetHeight = <span id="bodyHeight"></span> px</div> |
|
<div>body.srollLeft = <span id="bodyLeft"></span> px</div> |
|
<div>body.srollTop = <span id="bodyTop"></span> px</div> |
|
<div>documentElement.scrollLeft = <span id="deLeft"></span> px</div> |
|
<div>documentElement.scrollTop = <span id="deTop"></span> px</div> |
|
<div>html.scrollLeft = <span id="htmlLeft"></span> px</div> |
|
<div>html.scrollTop = <span id="htmlTop"></span> px</div> |
|
<hr/> |
|
<div>(onload)</div> |
|
<div>body.srollLeft = <span id="bodyLeftLd"></span> px</div> |
|
<div>body.srollTop = <span id="bodyTopLd"></span> px</div> |
|
<div>documentElement.scrollLeft = <span id="deLeftLd"></span> px</div> |
|
<div>documentElement.scrollTop = <span id="deTopLd"></span> px</div> |
|
<div>html.scrollLeft = <span id="htmlLeftLd"></span> px</div> |
|
<div>html.scrollTop = <span id="htmlTopLd"></span> px</div> |
|
<hr/> |
|
<div>(onscroll)</div> |
|
<div>body.srollLeft = <span id="bodyLeftSc"></span> px</div> |
|
<div>body.srollTop = <span id="bodyTopSc"></span> px</div> |
|
<div>documentElement.scrollLeft = <span id="deLeftSc"></span> px</div> |
|
<div>documentElement.scrollTop = <span id="deTopSc"></span> px</div> |
|
<div>html.scrollLeft = <span id="htmlLeftSc"></span> px</div> |
|
<div>html.scrollTop = <span id="htmlTopSc"></span> px</div> |
|
</div> |
|
<script> |
|
var doc = document; |
|
var html = doc.getElementsByTagName('html')[0]; |
|
// Unsupported on IE11 |
|
// var setText = (id, txt) { doc.getElementById(id).innerText = txt; }; |
|
function setText(id, txt) { doc.getElementById(id).innerText = txt; }; |
|
(function() { |
|
setText('bodyWidth', doc.body.offsetWidth); |
|
setText('bodyHeight', doc.body.offsetHeight); |
|
setText('bodyLeft', doc.body.scrollLeft); |
|
setText('bodyTop', doc.body.scrollTop); |
|
setText('deLeft', doc.documentElement.scrollLeft); |
|
setText('deTop', doc.documentElement.scrollTop); |
|
setText('htmlLeft', html.scrollLeft); |
|
setText('htmlTop', html.scrollTop); |
|
}()); |
|
window.addEventListener('load', function() { |
|
setText('bodyLeftLd', doc.body.scrollLeft); |
|
setText('bodyTopLd', doc.body.scrollTop); |
|
setText('deLeftLd', doc.documentElement.scrollLeft); |
|
setText('deTopLd', doc.documentElement.scrollTop); |
|
setText('htmlLeftLd', html.scrollLeft); |
|
setText('htmlTopLd', html.scrollTop); |
|
}); |
|
window.addEventListener('scroll', function() { |
|
setText('bodyLeftSc', doc.body.scrollLeft); |
|
setText('bodyTopSc', doc.body.scrollTop); |
|
setText('deLeftSc', doc.documentElement.scrollLeft); |
|
setText('deTopSc', doc.documentElement.scrollTop); |
|
setText('htmlLeftSc', html.scrollLeft); |
|
setText('htmlTopSc', html.scrollTop); |
|
}); |
|
</script> |
|
</div> |
|
</body> |
|
</html> |
