副队长JavaScript教程(63)-BOM之窗口大小与页面滚动-北京尧图网络

点此查看所有教程、项目、源码导航文章目录1. 背景2. 获取浏览器窗口可视区域大小2.1 innerWidth、innerHeight2.2 outerWidth、outerHeight了解3. 窗口缩放事件 resize4. 获取页面滚动距离 scrollX、scrollY5. 控制页面滚动的方法5.1 scrollTo (x, y) 滚动到固定坐标5.2 scrollBy (x, y) 相对当前位置滚动6. 滚动事件 scroll7. 实战案例回到顶部按钮8. 小结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.onresizefunction(){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.onscrollfunction(){console.log(当前垂直滚动距离,scrollY);}7. 实战案例回到顶部按钮需求页面很长滚动超过 300 像素之后显示 “回到顶部” 按钮点击按钮页面滚动回顶部。!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title回到顶部/titlestylebody{height:1500px;}#topBtn{position:fixed;bottom:50px;right:30px;display:none;}/style/headbodybuttonidtopBtn回到顶部/buttonscriptvarbtndocument.getElementById(topBtn);// 滚动事件window.onscrollfunction(){if(scrollY300){btn.style.displayblock;}else{btn.style.displaynone;}}// 点击回到顶部btn.onclickfunction(){scrollTo(0,0);}/script/body/html效果案例讲解给 body 设置很高高度让页面出现滚动条滚动事件里面判断 scrollY大于 300 就显示按钮否则隐藏点击按钮调用 scrollTo (0,0)直接滚动到页面顶部。8. 小结innerWidth /innerHeight获取网页可视区域大小outer 是整个浏览器窗口大小。onresize窗口大小改变触发的事件。scrollX /scrollY读取页面已经滚动的距离只读。scrollTo (x,y)滚动到指定坐标scrollBy (x,y)基于当前位置滚动一段距离。onscroll页面滚动时持续触发。这些都是 window 的 BOM 能力经常用来做回到顶部、滚动吸顶、适配窗口大小等网页效果。

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

相关推荐

认识Minilytics：免费自托管分析工具，告诉你到底是哪条推文让你赚了钱

脉冲雷达回波的距离门重排与匹配滤波原理及实现

富士施乐C2265/C2263维修手册1.2版：SC故障码解析与EEPROM校准实战指南

更多资讯

副队长JavaScript教程(62)-BOM之定时器

副队长JavaScript教程(61)-BOM之location、history、navigator常见用法

数据图表也有设计门槛：6款主流产品谁能做出更专业的商业图表？

AWESOME-OCR-LLM完整指南：一文读懂大模型时代OCR的900+篇论文全景

MediaPipe手势识别Android集成实战：从关键点到源码避坑

一枚回形针的门道：材料工艺、办公整理与手工改造全拆解

今日更新

AI智能体开发实战：从技术原理到商业落地

OpenShell 完全定制指南：从安装到深度配置，打造高效 Windows 开始菜单

Superpowers技能体系全解析：从Skills引入到安装的完整指南

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？