scroll家族
1.基本概念:
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
在实际开发中使用比较多的就是scrollTop,如下图:
2.浏览器适配问题
- 兼容性写法:
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
- 可以封装为:
/*
* 获取scrollTop和left
* 用法: scroll().top; scroll().left;
*/
function scroll() {
if (window.pageXOffset !=null) {
return {
top: window.pageYOffset,
left: window.pageXOffset
}
} else if (document.compatMode == 'CSS1Compt') {
return {
top: document.documentElement.scrollTop,
left: document.documentElement.scrollLeft
}
} else {
return {
top: document.body.scrollTop,
left:document.body.scrollLeft
}
}
}
3.scrollTo(x,y)
作用:把内容滚动到指定的坐标
格式:
scrollTo(xpos,ypos)
xpos
必需;要在窗口文档显示区左上角显示的文档的 x 坐标;
ypos
必需;要在窗口文档显示区左上角显示的文档的 y 坐标 。
因为网页大部分都没有水平滚动条,所以,这个x 不太常用。