查看滚动条距离

常规

  1. window.pageXOffset/pageYOffset IE9及以下不支持
  2. 支持 document.body.scrollLeft/scrollTop,document.documentElement.scrollLeft/scrollTop

不常见

  • window.scrollX/scrollY

封装

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

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

  1. 默认向后兼容

  2. 兼容w3c规范的是标准模式。否则就是怪异模式

    1. <!DOCTYPE html>
    2. <script>
    3. document.compatMode
    4.  标准模式:CSS1Compat
    5. 怪异模式:BackCompat
    6. </script>

    浏览器的可视区域尺寸(窗口的宽高)

    常规

    1. window.innerWidth/innerHeight

IE9及以下

  1. 标准模式 document,documentElement.clientWidth/clientHeight
  2. 怪异模式 document.body.clientWidth/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. }

scrollHeight,scrollWidth

  1. document.body/document.documentElement
  2. window.innerWidth+window.pageXOffset

封装

  1. function getScrollSzie(){
  2.   if(document.body.scrollWidth){
  3.     return {
  4.       width:document.body.scrollWidth,
  5.       height:document.body.scrollHeight
  6.     }
  7.   }else{
  8.     return {
  9.       width:document.documentElement.scrollWidth,
  10.       height:document.documentElement.scrollHeight
  11.     }
  12.   }
  13. }

getBoundingClientReact()

  • 不是实image.png不怎么用

    offsetParent 获取带有定位的父级

  • 父级有定位找父级距离。没有定位找可是距离位置

window.scroll(x,y)/window.scrollTo(x,y)