详解scroll client offset的区别

·  阅读 425

在开发滚动条组件时,因为需要频繁的操作dom.就经常需要使用到scroll client offset clientX clientY这些参数.为了帮助后来人快速理解和对自己学到的只是总结归纳 写下这篇超详细的归纳文章(各浏览器可能有所不同,本文特指现代浏览器,不包括IE在内).

从offset介绍开始 offset 直译是偏移的意思

  • offsetWidth是指div的宽度(包括div的边框)
    offsetWidth = width + padding + border + 竖向滚动条width
    直接使用HTMLElement.offsetWidth获取元素的宽度它会返回四舍五入后的值,如果想得到一个较为准确的值,我们可以使用 element.getBoundingClientReact().width
  • offsetHeight是指div的高度(包括div的边框)
    offsetHeight = Height + padding + border + 横向滚动条height
    直接使用HTMLElement.offsetHeight获取元素的宽度它会返回四舍五入后的值,如果想得到一个较为准确的值,我们可以使用 element.getBoundingClientReact().height
  • offsetLeft是指当前元素的左边界相对于offsetParent的距离
  • offsetTop是指当前元素的上边界相对于offsetParent的距离

image.png

client 可视区、客户端

  • clientHeight 表示返回元素内部的高度(单位像素),包含内边距但不包括水平滚动条、边框和外边距clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算
  • clientWidth 表示返回元素内部的宽度(单位像素),包括内边距但不包括垂直滚动条、边框和外边距clientWidth 可以通过 CSS width + CSS padding - 垂直滚动条高度 (如果存在)来计算
  • clientTop 表示一个元素顶部边框的宽度(以像素表示)。几乎是用不到的,可以理解成border-top的高度
  • clientX 是指鼠标位置到可视区左边界的距离
  • clientY 是指鼠标位置到可视区上边界的距离

image.png

scroll 译为‘滚动’

  • scrollHeight表示元素的总高度(包括边框),包括由于溢出并设置了overflow:hidden而无法展示在网页的不可见部分(不要误解为只有出现滚动条才有scroll属性)

我们可以扩展得出当scrollHeight-scrollTop==clientHeight时滚动条已经在最底部了

image.png

  • scrollWidth表示元素的总宽度(包括边框),包括由于溢出而无法展示在网页的不可见部分(不要误解为只有出现滚动条才有scroll属性)
  • scrollTop 可以设置或者获取元素与其容器顶部的像素距离,你可以理解为可视区的上边框与整个页面上边看不见的区域(包括边框)。如果没有垂直滚动条,那么scrollTop为0

image.png

  • scrollLeft 可以设置或者获取元素与其容器左边界的像素距离,你可以理解为可视区的左边框与整个页面左边看不见的区域(包括边框)。

image.png

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改