-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 能力经常用来做回到顶部、滚动吸顶、适配窗口大小等网页效果。
点此查看所有教程、项目、源码导航文章目录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 能力经常用来做回到顶部、滚动吸顶、适配窗口大小等网页效果。
