获取div的可视区域的大小 clientWidth clientHeight
var odiv=document.getElementById('odiv');
alert(odiv.clientWidth);
获取整个窗口的大小
alert(document.documentElement.clientWidth);
alert(document.documentElement.clientHeight);
滚动距离 scrollTop scrollLeft
document.onclick= function () {
//滚动条滚动的距离 document.documentElement.scrollTop[scrollLeft]
//谷歌认为滚动条是属于body里面的
// alert(document.documentElement.scrollTop);
// alert(document.body.scrollTop);
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
}
内容高度 scrollWidth scrollHeight
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#con{
width: 100px;
height: 100px;
border: 1px solid black;
padding: 10px;
}
#son{
width: 100px;
height: 300px;
background: pink;
}
</style>
</head>
<body>
<div id="con">
<div id="son"></div>
</div>
<script>
document.onclick= function () {
var con=document.getElementById('con');
alert(con.scrollWidth);
}
</script>
</body>
</html>
文档高度 offsetHeight
<div style="height: 200px;margin: 20px;width: 100px;background: pink"></div>
alert(document.documentElement.offsetHeight);
alert(document.body.offsetHeight);
onscroll：当滚动条滚动的时候触发
onresize：当窗口大小发生改变的时候触发
<body style="height: 2000px">
<script>
var i=0;
//i是根据时间间隔来计算的
window.onscroll= function () {
document.title=i++;
};
</script>
</body>
