CODEWITHSUNDEEP
javascripthtmlcssmarquee
hguser
hguser

Reputation: 36038

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.

Upvotes: 1

Views: 2529

Answers (1)

Gerben
Gerben

Reputation: 16825

(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/

Upvotes: 3

Related Questions