一、 offset+scroll+client详细讲解
1-1 offset系列
MDN中offset…
- offsetWidth/offsetHeight :对象的可见宽度
- offsetLeft/offsetTop： 当前元素距浏览器边界的偏移量，以像素为单位。
1、 offsetTop、offsetLeft
- offsetTop：元素到offsetParent顶部的距离（当前元素顶部距离最近父元素顶部的距离）
- offsetParent：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。
- offsetLeft: 同上
2、 offsetWidth、offsetHeight
- offsetWidth = width + 左右padding + 左右boder
- offsetHeight = height + 上下padding + 上下boder
3、 offsetX、offsetY
- event.offsetX 相对容器的水平坐标
- event.offsetY 相对容器的垂直坐标
1-2 client系列
MDN中client。。。
- clientWidth/clientHeight :内容的可见宽度
- clientTop/clientLeft : border。
1、 clientWidth、clientHeight
- clientWidth = width+左右padding
- clientHeigh = height + 上下padding
2、 clientTop、clientLeft
- clientTop = boder.top(上边框的宽度)
- clientLeft = boder.left(左边框的宽度)
3、 clientX、clientY
- clientX： 相对文档的水平坐标
- clientY： 相对文档的垂直坐标
1-3 scroll系列
MDN中scroll…
- scrollWidth/scrollHeight: 元素完整的高度和宽度，overflow:hidden的部分也计算在内。
- scrollLeft/scrollTop : 设置或返回已经滚动到元素的左边界或上边界的像素数。
1、 scrollWidth、scrollHeight
- scrollWidth：获取指定标签内容层的真实宽度（可视区域宽度+被隐藏区域宽度）
- scrollHeight：获取指定标签内容层的真实高度（可视区域高度+被隐藏区域高度）
2、 scrollTop、scrollLeft
- scrollTop: 内容层顶部 到 可视区域顶部的距离
- scrollLeft: 内容层左端 到 可视区域左端的距离
后续作者翻阅本文时，会贴出详细的例子更利于理解记忆，欢迎收藏文章来源：https://www.toymoban.com/news/detail-677353.html
二、 一张图片即可理解
文章来源地址https://www.toymoban.com/news/detail-677353.html
到了这里，关于offsetTop、clientTop、scrollTop等属性详解【概念+详细例子分析】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
