Infinite scroll div

by Venkatesan S

HTML

<div id="list">
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
    <span>Item 4</span>
    <span>Item 5</span>
    <span>Item 6</span>
    <span>Item 7</span>
    <span>Item 8</span>
    <span>Item 9</span>
    <span>Item 10</span>
</div>

CSS

* {
    box-sizing: border-box;
}

#list {
    overflow: hidden;
    width: 300px;
    height: 250px;
    background: red;
    padding: 10px;
}

#list span {
    display: block;
    height: 50px;
    padding: 10px 10px;
    margin-bottom: 10px;
    background: yellow;
}

.item:last-child {
    margin-bottom: 0px;
}
}

JavaScript

setInterval(function(){
  $('#list').stop().animate({scrollTop:60},400,'swing',function(){
    $(this).scrollTop(0).find('span:last').after($('span:first', this));
  });
}, 2000);