scroll家族

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 不太常用。