jsvascript学习（十一）- scroll

scroll家族方法

1、 onscroll —— 当元素的滚动条滚动时触发的事件

• onscroll事件貌似任何实体元素都可以绑定，这里的实体元素包括DOM元素、window元素、document元素。

• 用法：element.onscroll=function(){};

2、scrollTop —— 元素滚动条内的顶部隐藏部分的高度。

• scrollTop属性只有DOM元素才有，window/document没有。

• 用法1：获取值 var top = element.scrollTop;//返回数字，单位像素

• 用法2：设置值 element.scrollTop = 200;

3、scrollHeight —— 元素滚动条内的内容高度。

• scrollHeight同scrollTop属性一样，只有DOM元素才有，window/document没有。
• 不同的是scrollHeight是只读，不可设置。

    此外还有scrollLeft（网页左边被卷去的内容），scrollWidth(网页正文全文宽)，道理是一样的。

• 实际开发中scrollTop使用较多：

  
  
  

  scroll.png

处理scroll家族浏览器适配问题：

1. ie9+和最新浏览器

window.pageXOffset;   (scrollLeft)
window.pageYOffset;   (scrollTop)

2. Firefox浏览器和其他浏览器

document.documentElement.scrollTop;

3. Chrome浏览器和没有声明DTD

document.body.scrollTop;

4. 为了兼容所有浏览器可以对调用方式进行封装或者采用兼容写法( || )

/**
 * 获取滚动的头部距离和左边距离
 * scroll().top scroll().left
 * @returns {*}
 */
function scroll() {
    if(window.pageYOffset !== null){
        return {
            top: window.pageYOffset,
            left: window.pageXOffset
        }
    }else if(document.compatMode === "CSS1Compat"){ // W3C
        return {
            top: document.documentElement.scrollTop,
            left: document.documentElement.scrollLeft
        }
    }

    return {
        top: document.body.scrollTop,
        left: document.body.scrollLeft
    }
}

    其他scroll相关方法还有window.scroll()，window.scrollBy()，window.scrollTo()，基本上都是对指定位置的滚动，详情可自行了解

参考：
网易云js课程