1.offsetParent
元素的offsetParent属性是距离该元素最近的一个具有定位的父辈元素,如果没有符合条件的父辈元素,那么body就是它的offsetParent。
2.offsetWidth与offsetHeight
offsetWidth=width+横向padding值+横向border值+[横向滚动条width]
实际上,就是元素渲染到页面后的实际宽度尺寸,是否包含横向滚动条的宽度,对于不同浏览器有不同的处理方式,chrome浏览器没有加上横向滚动条的宽度。
同理,offsetHeight也类似。
3.offsetTop与offsetLeft
这两个属性就是“元素与它的offsetParent的上边界与左边界的距离”
4.scrollWidth与scrollHeight
如果要让一个元素的scrollWidth有值,它必须是可以滚动的,要满足至少以下两个条件:
1.元素要有宽度,并且宽度是生效的(如果你给一个行内元素设置width,宽度是不生效的)
2.元素的内部要有一个子元素,或者文本;子元素的width要大于该元素;如果是文本,那么文本在不换行的情况下要超出该元素的水平边界。
一个元素的scrollWidth不等于它自己的宽度,而是等于它的子元素(可滚动元素)的宽度,准确来说,是它的offsetWidth。
同理,scrollHeight也是类似。
5.scrollTop与scrollLeft
scrollTop与scrollLeft就是当可滚动的元素发生滚动时,里面的子元素分别从上边界和左边界出去了多少距离。
同理,jQuery的scrollTop()函数用于设置或返回当前匹配元素相对于垂直滚动条顶部的偏移。
使用scrollTop和offsetHeight判断滚动距离,实现新闻列表无间隙滚动的效果
<div class="list-wrapper" id="wrapper">
<ul class="item-list" id="item-list">
<li class="item">
<