当前位置: 首页 > news >正文

【JavaScript】十九、页面尺寸事件 + 获取元素位置

文章目录

  • 1、页面尺寸事件
  • 2、元素尺寸与位置
    • 2.1 获取元素宽高(不包含边框)
    • 2.2 获取元素宽高(包含边框)
    • 2.3 获取元素位置
    • 2.4 属性值区别总结
    • 2.5 getBoundingClientRect方法
  • 3、案例:仿京东固定导航栏

1、页面尺寸事件

  • 作用:会在窗口尺寸改变的时候触发事件
  • 事件:resize
  • 示例:

在这里插入图片描述

2、元素尺寸与位置

在滚动事件中,我们是指定了滚动的距离,但最方便是实现页面滚动到某个元素,就可以做某些事, 也就是说,如果能通过JS的方式,得到这个元素在页面中的位置

在这里插入图片描述

2.1 获取元素宽高(不包含边框)

获取元素的可见部分宽高(不包含边框border,margin,滚动条等,但包括padding),用DOM对象的clientWidth和clientHeight属性获取,示意图:

在这里插入图片描述

如下,div盒子自身的宽是200,再加上padding是10,两个,就是220

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: gold;padding: 10px;}</style>
</head><body><div></div><script>const div = document.querySelector('div')console.log(div.clientWidth)    //220</script>
</body>

再比如:检测屏幕宽度,也就是html对象的clientWidth属性

在这里插入图片描述

分析 flexible.js 的源码,就用到了这个元素宽高属性

在这里插入图片描述

2.2 获取元素宽高(包含边框)

获取元素的自身宽高,且包含padding、border、滚动条等 ⇒ offsetWidth和offsetHeight,数值型,只读,此外,获取的是可视宽高, 如果盒子是隐藏的,那获取的结果是0

在这里插入图片描述

2.3 获取元素位置

如上图,获取元素距离自己带有定位的父级元素的左、上距离,用offsetLeft和offsetTop,同样的,做为一个位置或者距离,它们是只读属性

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: gold;/* 元素外边距100像素 */margin: 100px;}
</head><body><div></div><script>const div = document.querySelector('div')console.log(div.offsetLeft)   //108</script>
</body>

108,是因为body有一个8px的外边距,100 + 8 = 108
在这里插入图片描述

关于这个带有定位的父级的理解:

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: gold;/* 元素外边距100像素 */margin: 100px;}p {width: 100px;height: 100px;background-color: purple;margin: 50px;}</style>
</head><body><div><p></p></div><script>const p = document.querySelector('p')console.log(p.offsetLeft)    //158</script>
</body>

p标签的offsetLeft是100 + 50 + 8 = 158,这是因为p标签的父级没有定位

在这里插入图片描述

改一下代码:给p标签的父级div加一个相对定位:

在这里插入图片描述
此时,p标签的offsetLeft就是50:

在这里插入图片描述

也就是说,offsetLeft这组属性值,受父级的影响,父级有定位,直接算距离,父级没有定位,往上找,直到找到最近的一个有定位的祖先元素,再开始算这个距离

在这里插入图片描述
最后,实际开发中不用纠结这个的计算,比如上面这个页面,我们要加事件:页面滑动到大盒子2的顶部的时候,就出现电梯导航栏,这种大盒子的父级一般都是body,是独立的,直接获取offsetLeft就行:

在这里插入图片描述

2.4 属性值区别总结

在这里插入图片描述

2.5 getBoundingClientRect方法

返回元素的大小及其相对于视口的位置:

element.getBoundingClientRect()

视口,即页面可视区:

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: purple;margin: 100px;}</style>
</head><body><div></div><script>const div = document.querySelector('div')const offset = div.getBoundingClientRect()console.dir(offset)</script>
</body>

此时,top是100,合理:

在这里插入图片描述

修改一下,调大html页面高度,让页面出现滚动栏,并把紫色盒子向上滑,只漏出小部分在浏览器可视框范围,刷新浏览器,发现top成了-124.5,这就是相对于视口的位置的理解,也是这个方法的返回值和前面offsetTop的区别:

在这里插入图片描述

3、案例:仿京东固定导航栏

在这里插入图片描述

需求:当页面滚动到秒杀模块,导航栏自动滑入,否则滑出,像上图中的这个绿色京东导航栏,写一个模拟页面:

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.content {overflow: hidden;width: 1000px;height: 3000px;background-color: pink;margin: 0 auto;}.backtop {display: block;width: 50px;left: 50%;margin: 0 0 0 505px;position: fixed;bottom: 60px;z-index: 100;}.backtop a {height: 50px;width: 50px;background: url(./images/bg2.png) 0 -600px no-repeat;opacity: 0.35;overflow: hidden;display: block;text-indent: -999em;cursor: pointer;}.header {position: fixed;/* top是0,在顶部,top是负数,就不在页面显示了 */top: -80px;left: 0;width: 100%;height: 80px;background-color: purple;text-align: center;color: #fff;line-height: 80px;font-size: 30px;transition: all .3s;}.sk {width: 300px;height: 300px;background-color: skyblue;margin-top: 500px;}</style>
</head><body><div class="header">我是顶部导航栏</div><div class="content"><div class="sk">秒杀模块</div></div><div class="backtop"><img src="./images/close2.png" alt=""><a href="javascript:;"></a></div><script>// 页面滚动事件window.addEventListener('scroll', function () {// 页面滚动到秒杀模块,就更新头部导航栏的css的top值// 即:当页面被卷去的头部 >= 秒杀模块的位置的offsetTopconst sk = document.querySelector('.sk')const head = document.querySelector('.header')// html页面被卷去的距离const n = document.documentElement.scrollTophead.style.top = n >= sk.offsetTop ? 0 : '-80px'})const backTop = document.querySelector('.backtop')backTop.addEventListener('click', function () {// html页面被卷去的距离为0,即返回顶部document.documentElement.scrollTop = 0})</script>
</body></html>

效果:一旦滑动到蓝色的秒杀模块位置,就出现紫色导航栏,点击返回顶部按钮,直接回到最开始

在这里插入图片描述

相关文章:

  • (二十五)安卓开发一个完整的登录页面-支持密码登录和手机验证码登录
  • Android Studio 项目文件夹结构详解
  • Android WebView深度性能优化方案
  • UE5 Chaos :官方文献总结 + 渲染网格体 (Render Mesh) 和模拟网格体 是如何关联的?为什么模拟网格体 可以驱动渲染网格体?
  • CAD-MLLM 论文阅读笔记
  • [redis进阶二]分布式系统之主从复制结构(2)
  • 【LeetCode 热题 100】哈希 系列
  • 调节磁盘和CPU的矛盾——InnoDB的Buffer Pool
  • 安全人员如何对漏洞进行定级?
  • HTTP:六.HTTP代理相关介绍
  • 力扣HOT100——无重复字符的最长子字符串
  • route
  • 基于javaweb的SpringBoot影视播放评分交流系统设计与实现(源码+部署文档)
  • 【VsCode】设置文件自动保存
  • Mysql 身份认证绕过漏洞
  • Kotlin 集合过滤全指南:all、any、filter 及高级用法
  • 二叉树的基本功能实现
  • Sentinel源码—1.使用演示和简介一
  • linuxbash原理
  • docker 多主机容器组网
  • 伊朗港口爆炸致18死800余伤,三分之二伤者已出院
  • 商务部:已有超1.2亿人次享受到以旧换新补贴优惠
  • 网络达人“拿”别人的视频为自己带货赚佣金,法院判决赔偿1.4万元
  • 预热苏杯,“谁羽争锋”全国新闻界羽毛球团体邀请赛厦门开赛
  • 国家发改委党组在《人民日报》发表署名文章:新时代新征程民营经济发展前景广阔大有可为
  • 上海黄浦一季度实到外资总量全市第二,同比增速领先全市