31 元素滚动scroll系列

技术交流 QQ 群:1027579432，欢迎你的加入！

欢迎关注我的微信公众号：CurryCoder的程序人生

1.元素 scroll 系列属性

• 使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

  
  元素scroll系列属性.png
  元素scroll系列属性解释.png

2.页面被卷去的头部

• 如果浏览器的高(或宽)度不足以显示整个页面时，会出现滚动条。当滚动条向下滚动时，页面上面会被隐藏掉的高度，就称为页面被卷去的头部。滚动条在滚动时触发 onscroll 事件。

3.仿淘宝固定右侧侧边栏案例

• 功能需求：
  • 原先侧边栏是绝对定位；
  • 当页面滚动到一定位置时，侧边栏改为固定定位；
  • 页面继续滚动，会让返回顶部显示出来；
• 核心思路：
  • 需要用到页面滚动事件scroll，因为是页面滚动，所以事件源是document；
  • 滚动到某个位置，就判断页面被卷去的上部值；
  • 页面被卷去的头部：可以通过window.pageYOffset获得。如果是被卷去的左侧window.pageXOffset；

  • 注意：元素被卷去的头部是element.scrollTop，如果是页面被卷去的头部则是window.pageYOffset。

    
    侧边栏由绝对定位过渡到固定定位时，位置的确定原理.png
• 页面被卷去的头部兼容性解决方案：
• 需要注意的是：页面被卷去的头部，有兼容性问题。因此，被卷去的头部通常有如下几种写法：
  • 1.声明了DTD(!DOCTYPE html)，使用document.documentElement.scrollTop
  • 2.未声明DTD，使用document.body.scrollTop
  • 3.新方法window.pageYOffset和window.pageXOffset，IE9开始支持。

  function getScroll(){
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
  }
  使用的时候getScroll().left
  

3.三大系列总结

三大系列对比.png
offset.png
client.png
scroll.png

• 它们主要的用法：
  • offset系列经常用于获得元素的位置offsetLeft、offsetTop；
  • client经常用于获取元素大小clientWidth、clientHeight
  • scroll经常用于获取滚动距离scrollTop、scrollLeft
• 注意：页面滚动的距离通过window.pageXOffset获得

4.资料下载

• 笔记及代码，欢迎 star,follow,fork......