副队长JavaScript教程(63)-BOM之窗口大小与页面滚动

点此查看所有教程、项目、源码导航

1. 背景

前面我们学习了定时器，这一节继续学习 window 下和窗口、滚动相关的能力。

我们平时开发网页，经常会遇到这些需求：获取浏览器可视区域大小、监听窗口缩放、拿到页面滚动距离、代码控制页面滚动（比如回到顶部），这些都属于 BOM 的能力。

说明：这些属性和方法都属于 window 对象，书写时 window 可以省略。

2. 获取浏览器窗口可视区域大小

可视区域，就是我们当前能看到网页内容的这块区域，也叫视口。

2.1 innerWidth、innerHeight

// 可视区域宽度（包含滚动条）console.log(window.innerWidth);// 可视区域高度（包含滚动条）console.log(window.innerHeight);

特点：只读属性，只能读取，不能修改。浏览器窗口缩放的时候，这两个值会跟着变化。

2.2 outerWidth、outerHeight（了解）

console.log(window.outerWidth);console.log(window.outerHeight);

outer 获取的是整个浏览器窗口的大小，包含浏览器标题栏、边框，一般开发很少用。

入门重点区分：inner 是网页内容可视区；outer 是整个浏览器窗口。

3. 窗口缩放事件 resize

当用户拖动浏览器边框，改变窗口大小的时候，会触发 resize 事件。

我们可以绑定这个事件，在窗口变化时做一些逻辑。

window.onresize=function(){console.log("窗口宽度：",innerWidth);console.log("窗口高度：",innerHeight);}

注意：窗口缩放过程中，这个事件会频繁触发，不要在里面写太重、很耗性能的代码。

4. 获取页面滚动距离 scrollX、scrollY

当页面内容很长，出现滚动条之后，我们可以拿到页面已经滚动出去的距离。

// 水平滚动距离（左右滚）console.log(window.scrollX);// 垂直滚动距离（上下滚，最常用）console.log(window.scrollY);

• 页面在最顶部，没有滚动：scrollY = 0
• 往下滚动多少像素，scrollY 的数值就是多少
• 只读属性，只能读取，不能直接赋值修改滚动位置

5. 控制页面滚动的方法

5.1 scrollTo (x, y) 滚动到固定坐标

作用：滚动到页面绝对位置，x 是水平位置，y 是垂直位置。

// 滚动到页面最顶部window.scrollTo(0,0);// 垂直滚动到距离顶部 500px 的位置window.scrollTo(0,500);

5.2 scrollBy (x, y) 相对当前位置滚动

作用：在当前滚动位置的基础上，再滚动一段距离，是相对偏移。
正数代表向右、向下；负数代表向左、向上。

// 在当前位置，向下滚动 100pxwindow.scrollBy(0,100);// 在当前位置，向上滚动 100pxwindow.scrollBy(0,-100);

简单区分：scrollTo 是 “去哪”；scrollBy 是 “再走多少”。

6. 滚动事件 scroll

页面滚动的时候，会持续触发 scroll 事件。
很多网页的导航栏滚动吸顶、滚动时显示回到顶部按钮，都是靠这个事件实现。

window.onscroll=function(){console.log("当前垂直滚动距离：",scrollY);}

7. 实战案例：回到顶部按钮

需求：页面很长，滚动超过 300 像素之后，显示 “回到顶部” 按钮；点击按钮，页面滚动回顶部。

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>回到顶部</title><style>body{height:1500px;}#topBtn{position:fixed;bottom:50px;right:30px;display:none;}</style></head><body><buttonid="topBtn">回到顶部</button><script>varbtn=document.getElementById("topBtn");// 滚动事件window.onscroll=function(){if(scrollY>300){btn.style.display="block";}else{btn.style.display="none";}}// 点击回到顶部btn.onclick=function(){scrollTo(0,0);}</script></body></html>

效果：

案例讲解：

1. 给 body 设置很高高度，让页面出现滚动条；
2. 滚动事件里面判断 scrollY，大于 300 就显示按钮，否则隐藏；
3. 点击按钮，调用 scrollTo (0,0)，直接滚动到页面顶部。

8. 小结

1. innerWidth /innerHeight：获取网页可视区域大小；outer 是整个浏览器窗口大小。
2. onresize：窗口大小改变触发的事件。
3. scrollX /scrollY：读取页面已经滚动的距离，只读。
4. scrollTo (x,y)：滚动到指定坐标；scrollBy (x,y)：基于当前位置滚动一段距离。
5. onscroll：页面滚动时持续触发。
6. 这些都是 window 的 BOM 能力，经常用来做回到顶部、滚动吸顶、适配窗口大小等网页效果。