window对象下视口相关属性

浏览器视口大小

语义浏览器显示窗口的大小,也就是我们能够看到的文档页面的大小。
例子
image.png

innerwidth、innerheight

语义浏览器视口的尺寸。

outerwidth、outerheight

语义整个浏览器的外部尺寸。

视口滚动距离

语义换句话说,就是文档向上移动的距离。

pageXOffset/scrollX、pageYOffset/scrollY

语义视口的上边沿与文档上边沿的距离。
语法这两个属性值是一样的,只是名字不一样,仅此而已。

Scroll()、scrollTo()

语义参数是绝对坐标。页面滚动到绝对坐标位置。多次执行这个函数,页面位置跟定是不变的。

scrollBy()

语义参数是相对坐标。多次执行这个函数,页面位置不断变化。

例子函数可以接受对象参数

  1. window.scrollBy({
  2. left: 100,
  3. top: 100,
  4. behavior: "smooth"
  5. })

浏览器本身移动距离禁用

moveBy()、moveTo()