offset &event 对象&scroll

offset家族

• offsetWidth 和 offsetHeight:
  offsetWidth:用于获取对象自身的宽度，包括内容，边框和内边距，即：offsetWidth = width+border+padding;
  offsetHeight:用于获取对象自身的高度，包括内容，边框和边距，即：offsetHeight = height+border+padding;

• offsetLeft 和offsetTop:
  offsetLeft:用于获取对象距离第一个有定位的父级盒子左边的距离，父级盒子从内向外寻找，如父级盒子没有定位，则以body为准！
  offsetTop:用于获取对象距离第一个有定位的父级盒子顶部的距离，父级盒子从内向外寻找，如父级盒子没有定位，则以body为准！
  取值：从父级元素的padding开始计算，不含border的值。即从自盒子边框到定位父级盒子边框的距离。

• offsetParent:
  返回当前对象的父级（带有定位）盒子，同offset相同，父级元素从内向外寻找，如无定位的父级元素，取值为body，如父级元素含多个定位元素，取就近。

offset和style的区别：

1. style只能获取行内属性，而offset可以获取所有；
   2.offset可以获取没有定位盒子的值，style.只能返回有定位盒子的属性值；
2. offset返回的是数字，style.返回的是字符串，除了数字后还带了单位；
3. offset属性值是只读的，无法通过offsetxxx= ''去修改，style属性值可读可改；
4. 如果没有给当前元素指定过top样式，则style返回的是空字符串。

event常见属性：

pageX/pageY screenX/screenY clientX/clientY的区别。

• pageX/pageY：是以当前文档为基准，不适用与IE6-8；
• screenX/screenY：是以屏幕为基准进行测量，即：当前元素距离屏幕的尺寸；
• clientX/clientY ：是以当前可是区域为基准。
• scrollTo(x,y)：将内容滚动到指定的坐标，格式：
  scrollTo(xpos,ypos)
  • xpos：属性值必须，要在窗口文档显示区左上角显示的文档的X坐标；
  • ypos：属性值必须，要在窗口文档显示区左上角显示的文档的Y坐标；

scroll家族：

• 网页正文全文宽：document.body.scrollWidth;
• 网页正文全文高：document.body.scrollHeight;
• 网页被卷去的高：document.body.scrollTop;
• 网页被卷去的左：document.body.scrollLeft(基本不用);
  处理scroll的浏览器适配问题：

1. ie9+ 和 最新浏览器：
   window.pageXOffset（相当于scrollLeft）
   window.pageYOffset; （相当于scrollTop）
2. Firefox浏览器 和 其他浏览器：
   document.documentElement.scrollTop;
3. Chrome浏览器 和 没有声明 DTD <DOCTYPE >：
   document.body.scrollTop;
4. 兼容写法：兼容写法
   var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;