浏览器滚动长度window.pageXOffset、window.pageYOffset

image.png

  1. chrome浏览器
  2. (1)、document.body.scrollLeft/scrollTop
  3. (2)、document.documentElement.scrollLeft/scrollTop 
  4. (1)(2)方法兼容性互斥
  5. window.pageXOffset/pageYOffset（只读属性） 别名 window.scrollX/ window.scrollY
  6. 不常用:window.scrollX/scrollY
  7. document.documentElement.scrollLeft/scrollTop chrome不可用

滚动高度方法的封装

  1. function getScrollOffset() {
  2.         if(window.pageXOffset){
  3.             return {
  4.                 left: window.pageXOffset,
  5.                 top: window.pageYOffset
  6.             }
  7.         }else{
  8.             return {
  9.                 left: document.body.scrollLeft+document.documentElement.scrollLeft,
  10.                 top: document.body.scrollTop+document.documentElement.scrollTop,
  11.             }
  12.         }
  13.     }

浏览器的标准模式与怪异模式

定义：

浏览器的标准模式指的符合w3c标准的，怪异模式指的是符合自己标准的浏览器
document.compatMode
“CSS1Compat” 是符合w3c规范的模式，标准模式
如果将<!DOCTYPE html>去掉
document.compatMode=‘BackCompat’怪异模式

浏览器可视区域的尺寸

  1. 常规：window.innerWidth/innerHeight 
  2. 浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。
  3. IE9及以下使用: docuemnt.documentElement.clientHeight/clinetWidth
  4. 怪异:document.body.clientWidth/clientHeight
  5. clientHeight不包含滚动条的高度

封装方法

  1.  function getViewportSize(){
  2.    if(window.innerWidth){
  3.      return {
  4.        width: window.innerWidth,
  5.        height: window.innerHeight
  6.      }
  7.    }else{
  8.      if(document.compatMode==='BackCompat'){
  9.        return {
  10.          width: document.body.clientWidth,
  11.          height: document.body.clientHeight
  12.        }
  13.      }else{
  14.        return {
  15.          width:document.documentElement.clientWidth,
  16.          height: document.documentElement.clientHeight
  17.        }
  18.      }
  19.    }
  20. }

image.png

scrollHeight、scrollWidth

  1. Element.scrollWidth这个只读属性是元素内容宽度的一种度量，包括由于overflow溢出而在屏幕上不可见
  2. 的内容，它包括边框，外边距或垂直滚动条
  3. docuemnt.body.scrollHeight/scrollWidth
  4. docuemnt.documentElement.scrollHeight/scrollWidth
  6. scrollWidth=window.innerWidth+window.pageXOffset
  8. function getScrollSize(){
  9.   if(document.body.scrollWidth){
  10.     return {
  11.       width: document.body.scrollWidth,
  12.       height:docuemnt.body.scrollHeight
  13.       }
  14.   }else{
  15.     return {
  16.       width: docuemnt.documentElement.scrollWidth,
  17.       height:docuemnt.documentElement.scrollHeight
  18.     }
  19.   }
  20. }

getBoundingClientRect()

offsetTop/offsetLeft/offsetParent

offsetParent找哪个祖先有定位的元素
offsetTop/offsetLeft相对于定位的父级的距离，如果父级都没定位，则是相对于body的距离
offsetWidth/offsetHeight：HTMLElement.offsetWidth是一个只读属性，返回一个元素的布局宽度

  1. function getElementDocPosition() {
  2.       var parent=el.offsetParent,
  3.         offsetLeft=el.offsetLeft,
  4.         offsetTop=el.offsetTop;
  5.      while(parent){
  6.        offsetLeft+=parent.offsetLeft;
  7.        offsetTop+=parent.offsetTop;
  8.        parent=parent.offsetParent;
  9.      }
  10.   return {
  11.     left: offsetLeft,
  12.     top: offsetTop
  13.   }
  14. }

window.scrollTo/scroll

两者执行的效果一样，都是滚动的距离
window.scroll(100,1000)

scrollBy在原来的基础上移动的距离
window.scrollBy(200,200)

两个作业：
1.一个自动滚动的阅读器
2.回到顶部