1. 写在前面

Javascript 由三部分构成，ECMAScript，DOM和BOM。

ECMAScript(核心) 　　描述了JS的语法和基本对象

Bom:(browser object model）；浏览器对象模型，提供一些属性和方法可以操作浏览器，浏览器可以做什么呢？比如跳转到另一个页面、前进、后退等等，程序还可能需要获取屏幕的大小之类的参数。 BOM的核心是Window，而Window对象又具有双重角色，它既是通过js访问浏览器窗口的一个接口，又是一个Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都以window作为其global对象。Window对象包含属性：document、location、navigator、screen、history、frames；

由于BOM的window包含了document，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM（Document Object Model）模型的根节点。BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。

Dom（document object model）:文档对象模型，顶级对象是document，主要用于操作页面元素，满足W3C标准

1.窗口的位置

// 获取浏览器位置的方法
const leftPosition = typeOf window.screenLeft === 'number' ? window.screenLeft : window.screenX
const topPosition = typeOf window.screenTop === 'number' ? window.screenTop : window.screenY

 

screenLeft, screenTop:支持的浏览器有 IE, Safari, Opera, Chrome

screenX, screenY:支持的浏览器有 Firefox, Safari, Chrome, 此外，Opera也支持该属性，但与screenLeft,screenTop不对应

2.窗口的大小

浏览器窗口大小也提供了innerWidth, innerHeight, outerWidth, outerHeigt四个属性

1. 在IE9+（考虑IE8？不存在的）， Safari， Firefox中，outerWidth和outerHeight返回浏览器窗口本身尺寸。innerWidth，innerHeight表示页面视口大小（减轻边框宽度）。
2. 在Opera中，outerWidth和outerHeight这两个属性的值表示页面视图容器的大小。innerWidth，innerHeight表示页面视口大小（减轻边框宽度）。
3. 在Chrome中，outerWidth和outerHeight与innerWidth，innerHeight返回的值一致，表示视口的大小。

let pageWidth = window.innerWidth,
    pageHeight = window.innerHeight
if (typeOf innerWidth != 'number') {
    if (document.compatMode == 'CSS1Compat') {//严格模式
        pageWidth = document.documentElement.clientWidth
        pageHeight = document.documentElement.clientHeight
    } else {
        pageWidth = document.body.clientWidth
        pageHeight = document.body.clientHeight
    }
}

3.getBoundingClientRect()

getBoundingClientRect() 返回的是矩形的集合。
表示了当前盒子在浏览器中的位置以及自身占据的空间的大小，除了 width 和 height 之外，
其他的属性是相对于视图窗口的左上角 来计算的。

获取 dom 元素相对于网页左上角定位的距离:

var positionX = this.getBoundingClientRect().left + document.documentElement.scrollLeft
var positionY = this.getBoundingClientRect().top + document.documentElement.scrollTop

判断元素是否在可视区域内

function isElView(el) {
  var top = el.getBoundingClientRect().top // 元素顶端到可见区域顶端的距离
  var bottom = el.getBoundingClientRect().bottom // 元素底部端到可见区域顶端的距离
  var se = document.documentElement.clientHeight // 浏览器可见区域高度。
  if (top < se && bottom > 0) {
    return true
  } else if (top >= se || bottom <= 0) {
    // 不可见
  }
  return false
}