Make the element auto and repeat scroll up

<div id="par">
  <div id="item11"></div>
  <div id="item12"></div>
  <div id="item13"></div>
  <div id="item14"></div>
  ....
</div>

I want to make the div#itemXX elements auto scroll up inside the div#par. Also I want it move one div each time.

I can use the <marquee> tag, but it has been deprecated, so I wonder if there other ways?

BTW, the height of the div#itemXX is not fixed.

UPDATE: I want the开发者_运维问答 "div#itemXX" move one each time. Just like the slide show,show one div each time,but if the current div's height is large than the viewport,it should scroll up,when the scroll end,the next div(slide) should move up.

---

(function(){
var top=0;
var par = document.getElementById('par')
var scroll = function() {
  top++;
  if( top>=par.firstElementChild.offsetHeight )
  {
    //first element is out of sight, so move to the end of the list
    top=0;
    par.firstElementChild.style.marginTop='';//reset to zero
    par.appendChild(par.firstElementChild);
  }
  else
  {
     //move the first element 'top' px up
     par.firstElementChild.style.marginTop='-'+top+'px';
  }
  setTimeout(scroll, 100);//repeat after 100ms
}
scroll();
})()

jsbin: http://jsbin.com/onohan/3/