可视区的尺寸
document.documentElement.clientWidth
document.documentElement.clientHeight
滚动距离
document.documentElement.scrollTop / scrollLeft
谷歌兼容性处理 document.body.scrollTop
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<script>
window.onload = function(){
document.onclick = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
alert(scrollTop);
}
}
</script>
</head>
<body style="height: 2000px;">
</body>
</html>
内容高度：
oDiv.scrollHeight / scrollWidth 除了边框以外的宽高
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<script>
window.onload = function(){
document.onclick = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
alert(document.getElementById('div1').scrollHeight);
}
}
</script>
</head>
<body style="height: 2000px;">
<div id="div1" style="width: 100px;height: 100px; border: 1px solid red;padding: 10px; margin: 10px;">
<div style="width: 100px;height: 200px;background: blue;">
</div>
</div>
</body>
</html>
文档高度：
document.documentElement.offsetHeight;
document.body.offsetHeight
ie下有兼容性问题，效果同可视区宽高
onscroll:当滚动条滚动的时候触发
onresize:当窗口大小发生改变的时候触发
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<script>
var i=0;
window.onscroll = function(){
document.title = i++;
}
</script>
</head>
<body style="height: 2000px;">
</body>
</html>
window.onresize = function(){
document.title = i++;
}
4015
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
