2016-08-19

一些窗口滚动和窗口、元素宽度高度的 Web APIs

最后更新： 2018-02-22

阅读次数：次

未经特殊声明，通过下面 API 获得的值的单位均为：像素（px）

Window 对象和 Screen、Element 接口

Window 表示窗口对象

Window 对象表示一个浏览器窗口或一个框架

window 对象表示一个包含 DOM 文档的窗口，其 document 属性指向窗口中载入的 DOM 文档。

如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

Screen 接口是 Window 的一个对象，它代表了一个屏幕，通常以一个窗口呈现，可通过 window.screen 来获得屏幕的详细信息

Element 接口是 Document 的一个对象。

这个接口描述了所有相同种类的元素所普遍具有的方法和属性。这些继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。例如， HTMLElement 接口是所有 HTML 元素的基础接口，而 SVGElement 接口是所有 SVG 元素的基本接口。

An HTMLElement is an Element , as defined in the HTML extension to the DOM Level 2 Core specification :
参考链接

interface HTMLElement : Element {
  attribute DOMString     id;
  attribute DOMString     title;
  attribute DOMString     lang;
  attribute DOMString     dir;
  attribute DOMString     className;
};

窗口滚动 API

Window.scrollX：返回该文档从左侧开始水平方向上滚动的像素值
Window.scrollY：返回文档从顶部开始垂直方向上滚动过的像素值

pageXOffset 属性是 scrollX 属性的别名
pageYOffset 属性是 scrollY 属性的别名

为了跨浏览器兼容，请使用 window.page*Offset 代替 window.scroll*
注：旧版本 IE（<9）对两个属性都不支持，必须使用其他的非标准属性

window.pageXOffset === window.scrollX; // true
window.pageYOffset === window.scrollY; // true

// 完整的兼容性代码如下：
var x =
  window.pageXOffset !== undefined
    ? window.pageXOffset
    : (document.documentElement || document.body.parentNode || document.body)
        .scrollLeft;
var y =
  window.pageYOffset !== undefined
    ? window.pageYOffset
    : (document.documentElement || document.body.parentNode || document.body)
        .scrollTop;

Window.scroll( x-coord, y-coord )：滚动到文档的某一个位置坐标点
Window.scrollTo( x-coord, y-coord )：滚动到文档的某一个位置坐标点

以上两个window对象的方法功能一样

窗口宽度高度 API

屏幕
- Screen.width : 返回当前设备屏幕的宽度值
- Screen.height : 返回当前设备屏幕的高度值
- Screen.availWidth : 返回浏览器窗口在屏幕上可占用的最大水平宽度
- Screen.availHeight : 返回浏览器窗口在屏幕上可占用的最大垂直空间，即最大高度
浏览器
- Window.outerWidth：获取浏览器窗口外部的宽度。表示整个浏览器窗口的宽度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调正窗口大小的边框（window resizing borders/handles）。
- Window.outerHeight：获取整个浏览器窗口的高度，包括侧边栏（如果存在）、窗口镶边（window chrome）和窗口调正边框（window resizing borders/handles）。
- Window.innerWidth：浏览器视口（viewport）宽度，如果存在垂直滚动条则包括它。
- Window.innerHeight：浏览器窗口的视口（viewport）高度，如果存在水平滚动条，则包括它。
- document.documentElement : 返回文档对象（document）的根元素（例如，HTML 文档的元素）。
  
  document.documentElement.clientWidth : 返回浏览器视口宽度，不包括垂直滚动条
  document.documentElement.clientHeight : 返回浏览器视口高度，不包括水平滚动条
- Get the browser viewport dimensions with JavaScript

兼容性处理

var w =
  window.innerWidth ||
  document.documentElement.clientWidth ||
  document.body.clientWidth;
var h =
  window.innerHeight ||
  document.documentElement.clientHeight ||
  document.body.clientHeight;

// Internet Explorer 9+、Chrome、Firefox、Opera 以及 Safari 支持 window.innerWidth & window.innerHeight

// 后面的代码是为了兼容万恶的 IE 5-8

元素宽度高度 API

Element.clientWidth：返回元素 可见内容 的宽度和左右 padding，但不包括垂直滚动条、border 和 margin。
Element.clientHeight：返回元素 可见内容 的高度和上下 padding，但不包括水平滚动条、border 和 margin。
Element.scrollWidth：返回元素 所有内容 的宽度（包括用 overflow:hidden; 隐藏的内容）和左右 padding，但不包括水平滚动条、border 和 margin。
Element.scrollHeight：返回元素 所有内容 的高度（包括用 overflow:hidden; 隐藏的内容）和上下 padding，但不包括水平滚动条、border 和 margin。
HTMLElement.offsetWidth：返回元素 可见内容 的宽度和左右 padding，并且包括垂直滚动条的宽度、左右 border，但是不包括左右 margin。
HTMLElement.offsetHeight：返回元素 可见内容 的高度和上下 padding，并且包括水平滚动条的高度、上下 border，但是不包括上下 margin。

以上图片截图自 stackoverflow，原文链接