offset家族
1.offsetWidth和offsetHeight
主要用来检测盒子自身的宽高+padding+border
2.offsetLeft和offsetTop
返回距离父级盒子(带定位)左边/上边的距离.如果父级盒子都没有定位,则返回距body的距离,
注意:这里距离父盒子的左边/上边是从父盒子的padding位置开始算的,父盒子的border不计算在内
offsetLeft和style.left的区别:
1.offset可以返回没有定位的盒子距离左边的距离,而style.left不能,因为只有定位的元素才有left的值
2.offsetLeft返回的是一个number类型的数子,不带单位,而style.left返回的是带单位的字符串
3.offsetLeft是只读属性,而style.left是可读写的
4.如果没有给元素指定left样式,style.left返回的是空字符串,而offsetLeft只能是数字
3.offsetParent
返回的是该元素的有定位的最近的父级元素,如果找不到父级元素则返回body.注意:如果元素用fixed定位的,则返回null
scroll家族
1.scrollWidth/scrollHeight
元素自身的宽高+padding,不包含border
如果内容区溢出,那么显示超出内容的大小+上/左内边距的值
如果内容溢出,设置了overflow属性(值为:auto/scroll/hide..),那么在高度计算上:溢出内容的大小
和上下的padding值都会加进去.
2.scrollLeft/scrollTop
监听元素被卷进去的距离:
element.scrollTop/element.scrollLeft
-------------------------------------
监听页面(window)滚动时页面卷进去的距离:
网页被浏览器遮挡(卷进去)的头部和左边的距离.有兼容问题
未声明documentType(谷歌): document.body.scrllTop
声明了documentType(IE678): document.documentElement.scrollTop
火狐/谷歌/IE9+以上支持:window.pageYOffset(推荐写法)
总的兼容写法:
var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
3.滚动事件(scroll事件)
element.onscroll = function() {
}
- window的滚动方法
window.scroll(x,y); //让window滚动到某个坐标的位置
//想让网页顺滑滚动可以加上样式.即可实现顺滑滚动
html {
scroll-behavior:smooth;
}
页面回到顶部
window.scroll({
top:0,
behavior:"smooth",
})
client家族
1.clientWidth和clientHeight
返回元素自身的宽高+padding,不包括边框 border、外边距 margin 和滚动条（如果有的话,自身宽高减去滚动条)
对于块级元素和行内块元素:
element.clientWidth/Height = 元素自身的宽/高(width/height) + padding
对于行内元素
element.clientWidth/Height = 0
2.clientTop和clientLeft
返回元素上/左边框的宽度,返回的是整数,只读属性
