详解JavaScript中的坐标和距离-创新互联

一 前言

创新互联专注于企业营销型网站、网站重做改版、那坡网站定制设计、自适应品牌网站建设、H5技术、商城网站建设、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为那坡等各大城市提供网站开发制作服务。

在前端开发中总会遇到各种各样需要使用或计算坐标和距离的情况，但是这些属性和方法众多，全部熟练地记下来并非是一件易事，大多只能现查，耗费不少时间精力，于是便有了整理记录的想法，即加深了印象，又方便随时查阅。

二 window 对象

浏览器里面，window 对象（注意，w为小写）指当前的浏览器窗口。
它也是当前页面的顶层对象，即最高一层的对象，所有其他对象都是它的下属。一个变量如果未声明，那么默认就是顶层对象的属性。
摘自《阮一峰 JavaScript 教程》

位置大小属性

window.screenX , window.screenY

只读属性

返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离（单位像素）。

window.innerHeight , window.innerWidth

只读属性

返回网页在当前窗口中可见区域的高度和宽度，即「视口」（viewport）的大小（单位像素）。

注意，这两个属性包括滚动条的高度和宽度。

window.outerHeight , window.outerWidth

只读属性

返回浏览器窗口的高度和宽度，包括浏览器菜单和边框（单位像素）。

window.scrollX , window.scrollY

只读属性

别名： window.pageXOffset , window.pageYOffset

分别返回页面的水平滚动距离和垂直滚动距离，单位都是像素。

注意，这两个属性的返回值不是整数，而是双精度浮点数。如果页面没有滚动，它们的值就是0。

摘自《阮一峰 JavaScript 教程》

为了跨浏览器兼容性，请使用 window.pageXOffset 代替 window.scrollX。另外，旧版本的 IE（<9）两个属性都不支持，必须通过其他的非标准属性来解决此问题。

摘自 MDN ：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollX

window 对象的方法

window.scrollTo() , window.scroll() , window.scrollBy()

window.scrollTo 方法 ---> 别名： window.scroll 方法

用于将文档滚动到指定位置。

它接受两个参数，表示滚动后位于窗口左上角的页面坐标。

也可以接受一个配置对象作为参数。

window.scrollTo(options)

配置对象 options 有三个属性。

• top：滚动后页面左上角的垂直坐标，即 y 坐标。
• left：滚动后页面左上角的水平坐标，即 x 坐标。
• behavior：字符串，表示滚动的方式，有三个可能值（smooth、instant、auto），默认值为 auto。
  

window.scrollBy 方法用于将网页滚动指定距离（单位像素）。

它接受两个参数：水平向右滚动的像素，垂直向下滚动的像素。

注意：仔细体会这两者的差别。

三 Element 节点

Element节点对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象（简称元素节点）。

相关属性

Element.clientHeight，Element.clientWidth

分别返回元素的高度和宽度，始终是整数值。

如果该元素是内联元素（display: inline;），则返回值为 0。

从盒模型的概念上来讲，返回的数值计算包括元素的 content 和 padding ，不包括 border 和 margin 。

如果有滚动条，返回的数值会减去滚动条占据的宽度或高度。（即不包含滚动条在内）

// 浏览器视口高度
document.documentElement.clientHeight
// 网页总高度
document.body.clientHeight

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前文章：详解JavaScript中的坐标和距离-创新互联
标题链接：http://cxhlcq.com/article/ccdpho.html