侧边栏壁纸
  • 累计撰写 218 篇文章
  • 累计创建 59 个标签
  • 累计收到 5 条评论
Web

元素的尺寸、偏移和滚动属性

barwe
2022-05-16 / 0 评论 / 0 点赞 / 1,131 阅读 / 1,717 字
温馨提示:
本文最后更新于 2022-05-16,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

下面是一个元素的盒模型:

image-20220516174835738

client-

在上面的盒模型中,元素的内部 指的是内容和内边距,并且 不包含滚动条

  • clientWidth: 元素的内部宽度,不计算边框和外边距
    • 只有块级元素才有这个属性,内联元素值为 0
    • 元素可滚动时还需要减去滚动条:pl + width + pr - scrollY.width
    • 单位是 像素,计算时会被四舍五入成整数
    • 只读属性,基本上浏览器都兼容
  • clientHeight: ...
  • clientTop: 元素上边框宽度(border-t),只读属性
  • clientLeft: 元素左边框宽度(border-l
  • 右边框和下边框没有对应属性!

offset-

border-box 模型的宽度。

border-box 模型:元素盒子由内容(以及滚动条)、内边距和边框组成。

相对于client-属性,offset-属性包含了滚动条和边框。

offset-也是一个四舍五入的整数,只读属性,单位是像素。

  • offsetWidth = 元素宽 + 竖直滚动条宽 + 水平内边距 + 水平边框
  • offsetHeight = 元素高 + 水平滚动条高 + 竖直内边距 + 竖直边框

offsetParent指向最近的包含该元素的定位父级元素,用来计算offsetTopoffsetLeft

定位元素position属性不为static的元素

定位父级:从近到远一次查找祖先节点,知道找到第一个position不为static的节点为止,即距当前元素最近的定位父级元素

根据元素自己的定位方式,计算其到定位父级的偏移距离:

  • 元素自己为fixed定位,此时因为是相对于视口进行定位,因此没有定位父级:Firefox 返回 body 节点,其它浏览器返回 null
  • 元素自身不是fixed定位,说明元素是相对于某个祖先元素进行定位,这个祖先元素就是定位父级
    • 各级父元素的定位都是static,定位父级是 body
    • 存在非static定位的父级元素,定位父级是距该元素最近的定位元素
  • body 元素没有定位父级元素

知道了定位父级元素,就可以计算这两个东西了:

  • offsetTop:元素的上外边框相对于定位父级的上内边框的偏移量
  • offsetLeft:元素的左外边框相对于定位父级的左内边框的偏移量

image-20220516232801392

scroll-

scrollHeight

竖直方向上元素溢出视口时变为可滚动,此时元素的实际内容高度就是scrollHeight,它包含了内容高度、内边距高度。

是一个四舍五入的整数,单位像素。

scrollWidth同理。

scrollTop

元素内容的实际顶部相对于视口顶部的便宜,可能是一个小数。

image-20220516233817741

scrollLeft同理。

浏览器窗口

浏览器界面可以分为下面几部分:

  • 顶部工具栏
  • 内容浏览区域(视口)

浏览器的窗口状态可能有下面几种:

  • 小窗口
  • 最大化窗口:视口宽度等于屏幕宽度
  • 全屏:视口宽度等于屏幕宽度,视口高度等于屏幕高度

window对象提供了两个东西:

  • window.outerWidth & window.outerHeight:浏览器窗口大小
  • window.innerWidth & window.innerHeight:浏览器视口大小

在全屏是,浏览器窗口与视口大小相同。

如果网站设计不合理,可能会导致inner-outer-不相等。

JS 滚动

scrollIntoView

目标节点的父节点是可滚动的,调用此方法会滚动其父节点,是目标节点处于视口顶部位置。

直接父节点不一定是可滚动的,也可能是某个祖先节点可滚动,这在添加滚动事件的时候需要注意。

scrollTo

在可滚动的节点上调用此方法,可滚动到指定位置。

scrollableElement.scrollTo(x: number, y: number)

或者

scrollableElement.scrollTo({
  left: number
  top: number
  behavior?: 'auto' | 'smooth'
})

其它类似方法:scroll, scrollBy

比较

调用对象不同:

  • scrollIntoView是在可滚动节点的子节点上调用的,滚动其父元素
  • scrollTo是在可滚动节点上调用的,滚动自己

参数不同:

  • scrollIntoView只能滚动父元素将自己置于视口顶部,不能设置偏移
  • scrollTo可通过传入滚动量自由滚动
0

评论区