window 对象

window 对象

窗口位置

window 对象提供了 screenLeft 和 screenTop 属性，用于表示窗口相对于屏幕左侧和顶部的位置，返回值的单位是 CSS 像素。

可以使用 moveTop() 和 moveBy() 方法移动窗口。

moveTop() 接收要移动到的新位置的绝对坐标 x 和 y ；moveBy() 则接收相对当前位置在两个方向上移动的像素数。

例：

// 把窗口移动到左上角。
window.moveTop(0, 0);
// 把窗口向右移动 100 像素。
window.moveBy(100, 0);

窗口大小

所有浏览器确定浏览器窗口大小都有 4 个属性：innerWidth、innerHeight、outerWidth 和 outerHeight。outerWidth 和 outerHeight 返回浏览器窗口自身的大小。innerWidth 和 innerHeight 返回浏览器窗口中页面窗口的大小(不包含浏览器边框和工具框)。

document.documentElement.clientWidth 和 document.documentElement.clientHeight 返回页面视口的宽度和高度。

let pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;
if (typeof pageWidth != "number") {
    if (document.compatMode == "CSS1Compat") {
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    } else {
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
}

使用 resizeTo() 和 resizeBy() 方法调整窗口大小。这两个方法都接收两个参数，resizeTo() 接收新的宽度和高度值，而 resizeBy() 接收宽度和高度各要缩放多少。

// 缩放到 100 X 100。
window.resizeTo(100, 100);
// 缩放到 200 X 150。
window.resizeBy(100, 50);

视口位置

使用 scroll() 、scrollTo() 和 scrollBy() 方法滚动页面。都接收两个参数，表示相对视口距离的 x 和 y 坐标。前两个方法表示要滚动到的坐标，最后一个表示滚动的距离

// 相对于当前视口向下滚动 100 像素。
window.scrollBy(0, 100);
// 滚动到页面左上角。
window.scrollTo(0, 0);

也可以通过设置 behavior 属性，设置是否平滑滚动。

// 正常滚动
window.scrollTo({
    left: 100, 
    top: 100,
    behavior: "auto"
});
// 平滑滚动
window.scrollTo({
    left: 100,
    top: 100,
    behavior: "smooth"
});