网页中的window,html,document,body各种高度

  • 选取document,html,body

    1
    2
    3
    4
    5
    document //选取文档

    document.documentElement // html

    document.querySelector('body) // body

  • window 的高度 屏幕尺寸

    1
    window.innerHeight

html body会塌缩

1
2
3
4
clientHeight // 视窗大小
scrollHeight //滚动高度
scrollTop // 滚动上边距高度
getBoundingClientRect // 相对视窗的 top, left

  • 图片懒加载用到原理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var oClass = document.querySelector('.class1');
oBody = document.querySelector('body');
var rect = oClass.getBoundingClientRect();
// var clientHeight = document.documentElement.clientHeight;
var height = oBody.scrollTop;

console.log(height,window.innerHeight);
window.addEventListener('scroll', function(){
    if(oBody.scrollTop + window.innerHeight + 20 > rect.top){
        console.log(1)
    }
})
window.addEventListener('scroll', function(){
    if(oBody.scrollTop + window.innerHeight + 20 > rect.top){
        console.log(2)
    }
})
2016-05-26
⬆︎TOP