浏览器中的各种宽高

document.body 和 document.document.Element

  • 页面指定 DOCTYPE时，使用 document.documentElement。
  • 页面没有指定 DOCTYPE时，使用 document.body。

document中的宽高

1.document下面client宽高

1
2
3
4
//元素高度(可视内容+内边距)
document.documentElement.clientHeight || document.body.clientHeight  
//元素宽度(可视内容+内边距)
document.documentElement.clientWidth || document.body.clientWidth

2.document下面offset宽高

  • document.body.offsetWidth “ (包括边线和滚动条的宽)”;
  • document.body.offsetHeight “ (包括边线的宽)”;

3.document下面scroll宽高

  • 火狐和Google浏览器解析不一样
    document.body.scrollHeight
    document.body.scrollWidth

  • 给定宽高小于浏览器窗口
    scrollHeight通常是浏览器窗口的高度
    scrollWidth通常是浏览器窗口的宽度

  • 给定宽高大于浏览器窗口，且内容小于给定宽高
    scrollHeight给定的高度度+其所有的padding、margin和border
    scrollWidth给定的宽度+其所有的padding、margin和border

  • 给定宽高大于浏览器窗口，且内容大于给定宽高
    scrollHeight给定的高度度+其所有的padding、margin和border
    scrollWidth给定的宽度+其所有的padding、margin和border

  • 无滚动轴：
    scrollWidth == clientWidth = style.width +style.padding * 2

  • 有滚动轴：
    scrollWidth == 是实际内容的宽度 + padding 2
    scrollHeight == 是实际内容的高度 + padding     2

  • document.body.scrollLeft

  • document.body.scrollTop
    可读写，值的是当前元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度

Event对象的5种坐标

1.clientX和clientY

  • 相对于浏览器(可视区左上角0，0)的坐标

2.screenX和screenY

  • 相对于设备屏幕左上角(0,0)的坐标

3.offSetX和offsetY

  • 相对于事件源左上角的坐标

4.pageX和pageY

  • 相对于整个网页左上角(0,0)的坐标

5.X和Y(使用时小写)

  • 本来是IE属性，相对于用CSS动态定位的最内层包容元素

可视区域加载

1
2
3
4
5
6
7
8
9
10
11
function show(){
    var div = document.geyElementById("id");
    //获取可视区域(兼容各浏览器)
    var clients = window.innerHeight || document.documentElement.clientHeight ||document.body.clientHeight
    //getBoundingClientRect()  返回Top bottom left right
    var divTop = div.getBoundingClientRect().top;
    if(divTop >= clients){
        div.classList.add("fadeInLeft")
    }
}
window.onscroll = show;

滚动到底部加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.onscroll = function scrollTopOrBottom(){
            //获取可视区域(兼容各浏览器)
             var clients = window.innerHeight || document.documentElement.clientHeight ||document.body.clientHeight
            //卷起的部分
            var scrollTop = document.body.scrollTop;
            //整个网页高度
            var wholeHeight = document.body.scrollHeight;
            if(clients + scrollTop >= wholeHeight){
                alert("滚动到底部");
            }
            if(scrollTop == 0){
                alert("滚动到顶部");
            }
        }

Div滚动到底部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var scrollDiv = document.getElementById('scrollDiv');
scrollDiv.onscroll = function scrollTopOrBottom() {
    //获取可视区域高度
    var clients = scrollDiv.clientHeight;
    //获取卷起部分
    var scrollTop = scrollDiv.scrollTop;
    //获取整个div高度
    var wholeHeight = scrollDiv.scrollHeight;
    if(clients + scrollTop >= wholeHeight){
        alert('滚动到底部')
    }
    if (scrollTop==0) {
        alert("滚动到顶部")
    }
}

获取滚动轴的宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function getScrollBarWidth() {
            var element = document.createElement('p'),
            styles={
                width:"100px",
                height:"100px",
                overflowY:"scroll"
                //css中为overflow-y
            },i,scrollBarWidth;
            for(i in styles){
                element.style[i] = styles[i];
            }
            document.body.appendChild(element);
            var scrollBarWidth = element.offsetWidth - element.clientWidth;
            element.remove();
            return scrollBarWidth;
        }