js三大家族之offset家族-scroll家族-client家

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() {
    
}

4. 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

返回元素上/左边框的宽度,返回的是整数,只读属性