在开发滚动条组件时,因为需要频繁的操作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(父元素)的x
- offsetTop是指当前元素的上边界相对于offsetParent的y
client 可视区、客户端
- clientHeight:
contentHeight+padding(不包含滚动条)表示返回元素内部的高度(单位像素)，包含内边距但不包括水平滚动条、边框和外边距clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算 - clientWidth:
contentWidth+padding(不包含滚动条)表示返回元素内部的宽度(单位像素),包括内边距但不包括垂直滚动条、边框和外边距clientWidth 可以通过 CSS width + CSS padding - 垂直滚动条高度 (如果存在)来计算 - clientTop:
border-top的宽度表示一个元素顶部边框的宽度（以像素表示）。几乎是用不到的,可以理解成border-top的高度 - clientLeft:
border-left的宽度 - clientX 是指鼠标位置到可视区左边界的距离
- clientY 是指鼠标位置到可视区上边界的距离
scroll 译为‘滚动’
- scrollHeight表示元素的总高度（包括边框），包括由于溢出并设置了overflow:hidden而无法展示在网页的不可见部分（不要误解为只有出现滚动条才有scroll属性）
我们可以扩展得出当scrollHeight-scrollTop==clientHeight时滚动条已经在最底部了
- scrollWidth表示元素的总宽度（包括边框），包括由于溢出而无法展示在网页的不可见部分（不要误解为只有出现滚动条才有scroll属性）
- scrollTop 可以设置或者获取元素与其容器顶部的像素距离,你可以理解为可视区的上边框与整个页面上边看不见的区域(包括边框)。如果没有垂直滚动条,那么scrollTop为0
- scrollLeft 可以设置或者获取元素与其容器左边界的像素距离,你可以理解为可视区的左边框与整个页面左边看不见的区域(包括边框)。
window大小
-
window.outerHeight 整个浏览器的高度
-
window.outerWidth 整个浏览器的宽度
-
window.innerHeight 内容区高度
-
window.innerWidth 内容区宽度
-
document.documentElement.offsetHeight 内容区高度
-
document.documentElement.offsetWidth 内容区宽度
-
window.scrollX:X轴滚动的位置(别名pageXoffset)
-
window.scrollY:Y轴滚动的位置(别名pageYoffset)
-
window.scrollBy(X,Y): 将页面滚动至相对于当前位置的(x,y)位置
-
window.scrollTo(pageX,pageY):将页面滚动至的绝对坐标
