目录
总结备查：
前言：
window.location === document.location;
window:窗口；
document:文档；
测试电脑屏幕分辨率：1920*1080；
测试浏览器：Chrome；
正文：
与window相关的宽高：
window.innerWidth:文档显示区的高度--1916
window.innerHeight:文档显示区的高度--938
window.outerWidth:设置或返回窗口的外部宽度，包括所有的界面元素（如工具栏/滚动）不包括任务栏--1918
window.outerHeight:设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）不包括任务栏--1038
window.screen.height:屏幕高度--1080
window.screen.width：屏幕宽度--1920
window.screen.availHeight:电脑屏幕减掉顶部工具栏跟底部任务栏的高度--1040
window.screen.availWidth:可用的屏幕宽度--1920
window.screenTop:浏览器距离屏幕顶端的距离--1
window.screenLeft:浏览器距离屏幕左端的距离--1
与document相关的宽高：
1、client相关
document.body.clientWidth：该元素的可视宽度（padding+content）
- 没有padding没有滚动 clientWidth = style.width；
- 有padding没有滚动 clientWidth = style+padding*2；
- 有padding有滚动，且滚动轴显示 clientWidth = style+padding*2-滚动轴宽度
document.body.clientHeight：该元素的可视高度（padding+content）
document.body.clientLeft：
clientTop = border-top的border-width
document.body.clientTop：
clientLeft = border-left的border-width
2、offset相关
document.body.offsetWidth/document.body.offsetHeight：padding+border+content（和超出元素的内容无关，只和设置的属性有关）
document.body.offsetLeft/document.body.offsetTop：
offsetParent：如果当前元素的父级元素没有进行css定位，offsetParent为body，加入有定位，则offsetParent为最近的父元素；
document.body.offsetLeft = offsetParent的margin-left + offsetParent的border + offsetParent的padding-left + 当前元素的margin-left；
document.body.offsetTop = offsetParent的margin-top + offsetParent的border + offsetParent的padding-top+ 当前元素的margin-top；
3、scroll相关
document.body.scrollWidth/document.body.scrollHeight
div.scrollWidth/div.scrollHeight
content + padding ，实际宽高（超出盒子）
document.body.scrollLeft/document.body.scrollTop:当元素其中的内容超出其宽高的时候，元素被卷起的宽高（可读写）；
father需要加overflow：hidden
Event对象的5种坐标
1、e.clientX/e.clientY
相对于浏览器（可视区左上角0,0）的坐标；
2、e.screenX/e.screenY
相对于设备屏幕左上角（0,0）的坐标；
3、offsetX/offsetY
相对于事件源左上角的坐标
4、pageX/pageY
相对于整个网页左上角（0,0）的坐标
5、x/y
相对于css动态定位的最内层包容元素
代码供测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> -->
<style>
*{
margin: 0;
padding: 0;
}
#ha{
margin-left: 100px;
margin-top: 50px;
width:300px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<div id="ha"></div>
</body>
<script>
var box = document.getElementById('ha');
box.onclick = function(e){
console.log(e.clientX+':'+e.clientY)
console.log(e.screenX+':'+e.screenY)
console.log(e.offsetX+':'+e.offsetY)
console.log(e.pageX+':'+e.pageY)
console.log(e.x+':'+e.y)
}
</script>
</html>滑动到顶部/滑动到底部Demo
用document.body.scrollTop一直获取不到值，最后改为document.documentElement.scrollTop，
可以用ajax请求数据加载；
整个浏览器：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 100px;
height: 100px;
margin: 2000px auto 100px;
background: red;
}
</style>
</head>
<body>
<div class="div" id="div">
</div>
</body>
<script>
// var h = div.getBoundingClientRect()
window.onscroll = function() {
var clientH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //兼容浏览器高度
var scrollTop = document.documentElement.scrollTop;//浏览器被卷起的高度
var wholeH = document.documentElement.scrollHeight; //整个网页的高度
// console.log(clientH);
// console.log(scrollTop);
// console.log(wholeH);
if(clientH+scrollTop >(wholeH-1)){
alert('到底了')
}
if(scrollTop == 0) {
alert('到顶了')
}
}
</script>
</html>单个盒子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
margin: 100px auto 100px;
background: red;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="div" id="div">
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
</div>
</body>
<script>
// var h = div.getBoundingClientRect()
var div = document.getElementById('div');
div.onscroll = function() {
var scrollTop = div.scrollTop;//内容被卷起的高度
var wholeH = div.scrollHeight; //box的高度
var clientH = div.clientHeight; //可视高度
// console.log(clientH);
// console.log(scrollTop);
// console.log(wholeH);
if(clientH+scrollTop >wholeH){
alert('到底了')
}
if(scrollTop == 0) {
alert('到顶了')
}
}
</script>
</html>可视区域加载Demo
可以做成瀑布流效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div {
width: 200px;
height: 200px;
margin: 1000px auto 100px;
transition: all 4s;
/*background: green;*/
}
.red{
background: red;
}
</style>
</head>
<body>
<div id="div" class="div">
</div>
</body>
<script>
window.onscroll = function(){
var clientH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //兼容浏览器高度
var mtop = mdiv.getBoundingClientRect().top;
var scrollTop = document.documentElement.scrollTop;
// console.log(mtop)
// console.log(scrollTop)
// console.log(clientH)
if(mtop<=clientH){
mdiv.classList.add('red')
}
}
</script>
</html>计算滚动轴的宽度
滚动轴的宽度 = 元素的offsetWidth - 元素的clientWidth；
jquery相关宽高
.width()/.height()
可读写，不能对window和document写；
与stuyle.width 相等
.innerWidth()/.innerHeight()
可读写，不能对window和document写；
content+padding
.outerWidth()/.outHeight()
可读写，不能对window和document写；
.outerWidth(true)
content+padding +border+margin
.outerWidth()
content+padding +border
.scrollLeft/.scrollTop
内容卷去的部分
.offset()
返回相当于body左上角的left，top值
.position()
相对于最近设置了position值的元素
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
