可视区尺寸：就是看得见的屏幕宽高
滚动距离：滚动条距上（左）边的距离。注意：并不是肉眼看到的实际距离，而是比例距离。
内容高度：盒子里面，抛开边框，从上到下的内容的高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width: 100px; height: 100px; border: 1px solid #000; padding: 10px; } #content{ width: 100px; height: 200px; background-color: red; } </style> </head> <body> <div id="box"> <div id="content"></div> </div> </body> <script> alert(document.getElementById('box').scrollHeight) </script> </html>
文档高度：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0px; margin: 0px; } #box{ width: 100px; height: 100px; border: 1px solid #000; padding: 10px; } #content{ width: 100px; height: 200px; background-color: red; } </style> </head> <body> <div id="box"> <div id="content"></div> </div> </body> <script> alert(document.documentElement.offsetHeight) </script> </html>
122px=border(2px)+height(100px)+padding(20px)
事件：
onscroll：当滚动条滚动的时候触发
onresize:当窗口大小发生改变的时候触发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body style="height: 2000px;"> </body> <script> var i=0; window.onscroll=function () { document.title=i++; } </script> </html>
滚动滚动条，title值在变化。注意：变化是根据移动的时间来决定的，移动的越慢，经历的时间越长，数值越大