当前位置:首页 » 《我的小黑屋》 » 正文

前端如何监听屏幕宽度的变化?

21 人参与  2024年09月19日 10:41  分类 : 《我的小黑屋》  评论

点击全文阅读


在平时的开发过程中,我们可能需要在屏幕宽度变化的时候实现某些业务逻辑,那么有哪些方法能满足我们的需求?

方法一:监听 resize 事件

在这里插入图片描述
运行上述代码,在 PC 上缩放浏览器窗口,可以发现宽高的数值随着你的操作改变而改变。

如果你的业务场景只在 PC,那么 resize 事件已经可以满足你对屏幕尺寸变化的监听,但如果你的业务场景同时也在移动端运行,那么监听 resize 事件就会有问题。

比如如下两张图,第一张是没有滑动的状态,第二张是向下滑动的状态。
图1

图2
在第一张图中,浏览器的导航栏显示,在第二张图中,浏览器的导航栏隐藏了,此时浏览器的窗口可视高度就变高了,会触发 resize 事件(窗口高度和宽度的变化都会触发 resize 事件)

这样一来,当用户上下滑动的时候就会频繁触发resize 事件,这肯定不是你希望的,因为你只希望屏幕宽度变化的时候才执行对应的业务逻辑。

一个解决办法是:页面初始化的时候,用一个变量保存当前的宽度,然后在回调函数里判断新旧宽度是否相等,不相等才执行对应的业务逻辑。代码修改如下:

在这里插入图片描述
上述解决办法是个不错的选择,唯一的缺点是我们需要一个额外的变量来保存 lastWidth 上一次的宽度,如果不想引入额外的变量,我们可以使用下面的方法。

方法二:Resize Observer API

ResizeObserver API 是一种可以监听元素边界尺寸变化的方法,为此,我们可以使用它监听 html(document.documentElement) 根元素的边界尺寸变化来判断屏幕的宽度是否已经变化,代码如下:

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/ae2a138296034efabc51da8c3c6bae5c.png

在上述代码中,我们实例化一个 ResizeObserver 实例 resizeObserver,在其回调函数内,每个被观察的元素都有一个 contentRect 属性,它是一个对象,内部有如下属性:

在这里插入图片描述
此时,当 html 元素上没有任何的 width、height、padding、margin 这些边界相关的样式时,那么 contentRect.width 就是浏览器可视区域的宽度

最后调用 resizeObserver 的 observe 方法观察 html 元素。

运行上述代码,缩放浏览器,会发现宽度会随之改变。同时,在移动端浏览器上下滑动页面,虽然浏览器会因为导航栏的显示和隐藏导致可视高度的改变,但并不会触发 resizeObserver 的观察。


点击全文阅读


本文链接:http://zhangshiyu.com/post/161577.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • [完结]沈淮安陆心玥(又名:暗恋青梅十年我选择放手)新上全
  • 暴雨惊魂夜:+后续(陆舟吴佳)全书免费_(陆舟吴佳)暴雨惊魂夜:+后续后续(陆舟吴佳)
  • 我死遁后,族长悔疯了:结局+番外(我死遁后,族长悔疯了:结局+番外)_我死遁后,族长悔疯了:结局+番外(战痕音音)列表_笔趣阁(战痕音音)
  • 温长生陆扶摇(温长生陆扶摇:结局+番外)完结_温长生陆扶摇列表_笔趣阁(温长生陆扶摇:结局+番外)
  • 梁岁霍司年叶琳完本(又名:似月光吻野风)完本_完本梁岁霍司年叶琳完本(又名:似月光吻野风)
  • 全书免费周宴礼宋知蔓(又名:改嫁闲散王爷后负心将军跪求我原谅)_周宴礼宋知蔓(又名:改嫁闲散王爷后负心将军跪求我原谅)全书免费
  • 天鹅曾坠落(江舒白秦蓁)_天鹅曾坠落(江舒白秦蓁)
  • [爱的莫比乌斯环]精彩节选免费试读_江子安娇娇老公节选免费试读
  • 温长生陆扶摇:结局+完结宝藏_温长生陆扶摇:结局+完结宝藏
  • 好看的温长生陆扶摇:结局+完结宝藏_温长生陆扶摇:结局+完结宝藏
  • 全书免费娘子为师弟夺我秘宝后我灭她满门月婵柳安澜李凤年在线(又名:娘子为师弟夺我秘宝后我灭她满门)_娘子为师弟夺我秘宝后我灭她满门月婵柳安澜李凤年在线(又名:娘子为师弟夺我秘宝后我灭她满门)全书免费
  • 离婚后嫁死对头,冷傲总裁红了眼:+后续列表_离婚后嫁死对头,冷傲总裁红了眼:+后续(姜岁宁顾寒川)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1