获取html元素相对屏幕的位置

本文介绍: Jav a script 由三部分构成，ECMASc rip t，DOM和BOM。ECMASc rip t(核心) 　　描述了JS的语法和基本对象浏览器对象模型，提供一些属性和方法可以操作浏览器，浏览器可以做什么呢？比如跳转到另一个页面、前进、后退等等，程序还可能需要获取屏幕的大小之类的参数。BOM的核心是Win dow，而Win dow对象又具有双重角色，它既是通过 js 访问浏览器窗口的一个接口，又是一个Glo b al（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都以window作为其global 对象。

Jav a script 由三部分构成，ECMASc rip t，DOM和BOM。

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

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

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

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

offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）

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

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
    }
}

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

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 &amp;&amp; bottom > 0) {
    return true
  } else if (top >= se || bottom <= 0) {
    // 不可见
  }
  return false
}