经常会遇到offset、scroll、client这几个关键词，每次都需要进行各种实验。这是一个摘要。两张图片的townbuilding，随时看1.offsetoffset指的是偏移量，包括该元素在文档中所占的所有显示宽度，包括滚动条、padding、border，不包括溢出隐藏部分。offsetParent属性返回一个对象的引用，这个对象是调用offsetParent的最近的（在包含层次结构中最接近的）父元素，并且是已经被CSS定位的容器元素。如果容器元素未由CSS定位，则offsetParent属性的值是对根元素的引用。如果当前元素的父元素中没有CSS定位（position是绝对/相对），offsetParent是body如果当前元素的父元素中有CSS定位（position是绝对/相对），offsetParent取最近的父元素obj.offsetWidth是指obj控件本身的绝对宽度，不包括溢出未显示的部分，即其实际宽度，整数，单位：像素。offsetWidth=border-width*2+padding-left+width+padding-rightobj.offsetHeight指的是obj控件本身的绝对高度，不包括因为溢出而没有显示的部分，即它实际占用的高度，整数，单位：像素。offsetHeight=border-width*2+padding-top+height+padding-bottomobj.offsetTop是指obj相对于布局或offsetParent属性指定的父坐标计算出的top位置，整数，单位：像素。offsetTop=offsetParent的padding-top+中间元素的offsetHeight+当前元素的margin-topobj.offsetLeft是指计算出的obj相对于布局或offsetParent属性指定的父坐标的左边位置，整数，单位：像素。offsetLeft=offsetParent的padding-left+中间元素的offsetWidth+当前元素的margin-left2.scrollscroll指的是滚动，包括未显示元素的实际宽度，包括padding，不包括滚动条，borderscrollHeight得到的对象的滚动高度，对象的实际高度；scrollLeft设置或获取对象左边缘与窗口当前可见内容最左端的距离scrollTop设置或获取最顶层对象与窗口最顶层可见内容的距离scrollWidth获取对象的滚动程度宽度3.clientclient是指元素本身的可视内容，不包括overflow的折叠部分，不包括滚动条，边框，包括paddingclientWidth对象的可见宽度，不包括滚动条等线条，会随着显示尺寸的变化而变化windowclientHeight对象的可见高度clientTop和clientLeft返回元素周围边框的粗细，其值一般为0。因为滚动条不会出现在顶部或左侧，所以大部分帖子都在网上都是深浅不一，甚至有些不一致。以下文章是学习过程的总结。如有发现错误请留言指出~参考：javascriptoffset,client,scroll总结笔记轻松理解javascript中的offset,scroll,clientoffsetclientscrollscreen关键字PS：欢迎大家关注我的公众号【前端下午茶】，加油哦~另外可以加入“前端下午茶交流群”微信群，长按识别下方二维码加我为好友，添加备注到加群，我拉你进群~
