网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;
关于offset共有5个东西需要弄清楚：
1. offsetParent
2. offsetTop
3. offsetLeft
4. offsetWidth
5. offsetHeight
offsetWidth与offsetHeight
也就是元素的可视宽度，这个宽度包括元素的边框(border)，水平padding，垂直滚动条宽度，元素本身宽度等
offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)。
offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)
offsetLeft与offsetTop
返回对象元素边界的左上角顶点相对于offsetParent的左上角顶点的水平偏移量。从这个定义中我们可以明确地知道offsetLeft与当前元素的margin-left和offsetParent的padding-left有关
offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)。
offsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)
offsetParent
- 如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。
- 如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。
关于client共有4个东西需要弄清楚：
1. clientLeft
2. clientTop
3. clientWidth
4. clientHeight
clientWidth和clientHeight
该属性指的是元素的可视部分宽度和高度
clientWidth = style.width + style.padding*2 - 滚动轴宽度
clientHeight同理
clientTop和clientLeft
这一对属性是用来读取元素的border的宽度和高度的
clientTop = border-top 的 border-width
clientLeft = border-left 的 border-width
关于scroll
1.scrollWidth
2.scrollHeight
3.scrollTop
4.scrollLeft
scrollWidth和scrollHeight：细分为body和其他元素，这里不对body做介绍
在某div中scrollWidth和scrollHeight计算规则如下
无滚动轴时：
scrollWidth = clientWhidth = style.width + style.padding*2
有滚动轴时：
scrollWidth = 实际内容的宽度 + padding*2
scrollHeight同理
scrollTop和scrollLeft：这对元素是可读写的，指的是当元素其中的内容超出其宽高的时候，元素被卷起的宽度和高度。
滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。
function getScrollTop(){
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
if(document.body){
bodyScrollTop = document.body.scrollTop;
}
if(document.documentElement){
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
return scrollTop;
}
//文档的总高度
function getScrollHeight(){
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
if(document.body){
bodyScrollHeight = document.body.scrollHeight;
}
if(document.documentElement){
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
return scrollHeight;
}
function getWindowHeight(){
var windowHeight = 0;
if(document.compatMode == "CSS1Compat"){
windowHeight = document.documentElement.clientHeight;
}else{
windowHeight = document.body.clientHeight;
}
return windowHeight;
}
window.onscroll = function(){
if(getScrollTop() + getWindowHeight() == getScrollHeight()){
alert("已经到最底部了！!");
}
};
//jquery
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if(scrollTop + windowHeight == scrollHeight){
alert("已经到最底部了！");
}
});
滚动时元素出现在了屏幕可见区域判断条件：
div.offsetTop < document.documentElement.clientHeight + document.documentElement.scrollTop || document.body.scrollTop
常见场景：图片懒加载
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>页面懒加载</title>
<style>
img {
display: block;
margin: 0 auto 50px;
width: 960px;
height: 540px;
}
</style>
</head>
<body>
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzutb8xegj31hc0u0k77.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzutz6y29j31hc0u0ak4.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuu8igyyj31hc0u0qgv.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuug47wrj31hc0u0k2q.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuuowb0hj31hc0u0akx.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuuyjapsj31hc0u0ths.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzutb8xegj31hc0u0k77.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzutz6y29j31hc0u0ak4.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuu8igyyj31hc0u0qgv.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuug47wrj31hc0u0k2q.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuuowb0hj31hc0u0akx.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuuyjapsj31hc0u0ths.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzutb8xegj31hc0u0k77.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzutz6y29j31hc0u0ak4.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuu8igyyj31hc0u0qgv.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuug47wrj31hc0u0k2q.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuuowb0hj31hc0u0akx.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuuyjapsj31hc0u0ths.jpg" alt="">
</body>
<script>
var num = document.getElementsByTagName('img').length;
var img = document.getElementsByTagName("img");
// 存储图片加载到的位置，避免每次都从第一张图片开始遍历
var n = 0;
// 页面载入完毕加载可视区域内的图片
lazyload();
window.onscroll = lazyload;
// 监听页面滚动事件
function lazyload() {
// 可见区域高度
var seeHeight = document.documentElement.clientHeight;
// 滚动条距离顶部高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = n; i < num; i++) {
if (img[i].offsetTop < seeHeight + scrollTop) {
if (img[i].getAttribute("src") == "default.jpg") {
img[i].src = img[i].getAttribute("data-src");
}
n = i + 1;
}
}
}
</script>
</html>
