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

Stardustsky 发布于2019-08-20 17:42 / 601人阅读

摘要：在用浏览器打开一个网页的这个情况下，视口坐标就是指浏览器窗口的坐标，而文档坐标就是我们网页的坐标。这两个坐标系的换算要通过滚动条的位置来换算。获取视口的尺寸和以上规则一样，只是相应的属性是

在用浏览器打开一个网页的这个情况下，视口坐标就是指浏览器窗口的坐标，而文档坐标就是我们网页的坐标。在页面没有滚动的情况下，这两个坐标的原点是重合的，也就是二者的左上角（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

GPU云服务器云服务器使用Javascript和DOM 苹果坐标系坐标转换 php 横坐标纵坐标屏幕坐标

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83790.html

JavaScript 编程精解中文第三版十七、在画布上绘图

摘要：贝塞尔曲线方法可以绘制一种类似的曲线。不同的是贝塞尔曲线需要两个控制点而不是一个，线段的每一个端点都需要一个控制点。下面是描述贝塞尔曲线的简单示例。来源：ApacheCN『JavaScript 编程精解中文第三版』翻译项目原文：Drawing on Canvas 译者：飞龙协议：CC BY-NC-SA 4.0 自豪地采用谷歌翻译部分参考了《JavaScript 编程精解（第 2...

habren 2019-08-23 18:19 评论0 收藏0
HTML5如何使用SVG

摘要：标签标签用于将多个形状组成一个组，方便复用。表示的宽度和长度是实际的像素值。标签标签对的属性不起作用，如果需要变形，就要使用标签。注意，如果使用标签插入文件，就无法获取。代码优化永远是程序员亘古不变的需求，而合理的利用SVG图片来代替部分PNG/JPG等格式的图片则是前端优化重要的一环，既然是优化，那我们先来看看SVG图片都有哪些优势： SVG 可被非常多的工具读取和修改（比如记事本...

n7then 2019-08-23 14:39 评论0 收藏0
Javascript之事件(二)

摘要：和支持这个事件。特定于事件目标的对象的数组。这个事件的目的是提供与文档或元素的加载状态有关的信息和有一个特性，名叫往返缓存，或，这个事件在页面显示时触发该事件会在浏览器卸载页面的时候触发事件的对象还包含一个名为的布尔值属性。 showImg(http://static.segmentfault.com/build/global/img/emojis/ribbon.png);事件类型 ...

desdik 2019-08-21 10:47 评论0 收藏0
JavaScript 中那些关于坐标和距离的属性与方法

摘要：摘自阮一峰教程位置大小属性只读属性返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离单位像素。摘自阮一峰教程相关方法返回一个对象，提供当前元素的大小位置等信息。摘自阮一峰教程四鼠标事件接口通过添加的事件所产生的事件对象也是实例。一前言在前端开发中总会遇到各种各样需要使用或计算坐标和距离的情况，但是这些属性和方法众多，全部熟练地记下来并非是一件易事，大多只能现查，耗费不少...

jsummer 2019-08-26 13:57 评论0 收藏0