页面DOM元素的scroll与offset相关属性

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">
    
class="item-list" id="item-list">
        
class="item">
            <div class="pull-left">《聚焦商博会》境外采购商小商品市场行1div>
            <div class="pull-right">2017-10-16div>
        
        
class="item">
            <div class="pull-left">《聚焦商博会》境外采购商小商品市场行2div>
            <div class="pull-right">2017-10-16div>
        
        
class="item">
            <div class="pull-left">《聚焦商博会》境外采购商小商品市场行3div>
            <div class="pull-right">2017-10-16div>
        
        
class="item">
            <div class="pull-left">《聚焦商博会》境外采购商小商品市场行4div>
            <div class="pull-right">2017-10-16div>
        
        
class="item">
            <div class="pull-left">《聚焦商博会》境外采购商小商品市场行5div>
            <div class="pull-right">2017-10-16div>
        
        
class="item">
            <div class="pull-left">《聚焦商博会》境外采购商小商品市场行6div>
            <div class="pull-right">2017-10-16div>
        
    
div>

.list-wrapper {
    height: 120px;
    overflow: hidden;
    margin-top: 20px;
}

.item-list {
    padding-left: 0;
}

.item {
    overflow: hidden;
    border-bottom: 1px dashed #ddd;
    line-height: 30px;
}