JavaScript DOM 8 - 文档坐标和视口坐标

2024年4月2日 199次阅读 来源: nanaistaken

在用浏览器翻开一个网页的这个情况下，视口坐标就是指浏览器窗口的坐标，而文档坐标就是我们网页的坐标。在页面没有转动的情况下，这两个坐标的原点是重合的，也就是两者的左上角（0， 0）重合，然后这两个坐标系的X轴和Y轴离别朝右和朝下延长。

网页上的某个元素，同时处于这两个坐标系中，当页面没有任何滚的时刻，它在两个坐标系中的坐标是一样的，然则当页面转动了以后，就会不一样了。这两个坐标系的换算要经由过程转动条的位置来换算。

转动条一开始的坐标也是(0, 0)，所以转动条的坐标也就是转动条的偏移量，同时也回响反映了页面上的一个元素在文档坐标系中的坐标和在视口坐标系中的坐标的差值：

文档坐标系坐标 ＝ 视口坐标系坐标 ＋ 转动条的偏移量

猎取转动条的坐标(偏移量)要考略IE8及之前的版本，同时要考略浏览器是不是处在奇异形式下面，总得来说有三种方法取得转动条坐标：

1: pageXOffset, pageYOffset -> 一切浏览器及 >= IE9
2: document.documentElement.scrollLeft, document.documentElement.scrollTop -> 一切规范形式下面的浏览器
3: document.body.scrollLeft, document.body.scrollTop -> 一切奇异形式下面的浏览器

所以假如我们写一个总能猎取到转动条得函数，那就是：

function getScrollOffsets(w){
    var w = w || window;
    if(w.pageXOffset !== null){
        return {x: pageXOffset, y: pageYOffset}
    }
    var d = w.document;
    if(document.compatMode == 'CSS1Compat'){
        return {x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop}
    }
    return {x: d.body.scrollLeft, y: d.body.scrollTop}
}

document.compatMode能够猎取当前浏览器得形式：

BackCompat： quirks mode（奇异形式）
CSS1Compat： none-quirks mode（非奇异形式，也叫做standards或许limited-quirks或许 almost standards）。

猎取视口的尺寸和以上划定规矩一样，只是响应的属性是：

window.innerWidth | window.innerHeight
document.documentElement.clientWidth | document.documentElement.clientHeight
document.body.clientWidth | document.body.clientHeight
    原文作者：nanaistaken
    原文地址: https://segmentfault.com/a/1190000010014392
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞