overflow hidden auto-scroll

Question

Anyone know how can I set auto-scroll (with loop) in div with overflow:hidden; ?

Example

<div class="container" style="width:500px; max-width:500px; height:100px; max-height:100px; background:#F00; overflow:hidden;">
    <div class="element_01" style="width:500px; height:100px; float:left;"></div>
    <div class="element_02" style="width:500px; height:100px; float:left;"></div>
</div>

final effect?

Show element_01 -> wait 5 sec -> smooth scroll to element_02 -> wait 5 sec // and repeat

Answer 1

This example uses positioning instead of scrolling. Scrolling with an overflow hidden element works, but can be buggy.

http://codepen.io/anon/pen/tqgyA

 $(document).ready(function() { var numSlides = $('ul.scroller').children().length, counter = 0; windowHeight = $('.window').height(); setInterval(function() { counter++; if (counter == numSlides) { counter = 0; $('.scroller').css('top', '0'); } else { var toMove = (counter * windowHeight); $('.scroller').css('top', '-'+toMove.toString()+'px'); } }, 2000) }); 

 html { font-family: Helvetica, Arial } .window { width: 300px; height: 200px; overflow: hidden; position: relative; border: 2px solid skyblue; } ul.scroller { width: 100%; position: absolute; top: 0; left: 0; list-style-type: none; padding: 0; margin: 0; -webkit-transition: top .5s ease; transition: top .5s ease; } ul.scroller li { width: 100%; height: 200px; box-sizing: border-box; padding: 80px 0; text-align: center; font-size: 28px; } ul.scroller li:nth-child(2n+2) { background: #F5F5F5 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="window"> <ul class="scroller"> <li> First Item </li> <li> Second Item </li> <li> Third Item </li> <li> Fourth Item </li> </ul> </div> 

Answer 2

You can use scrollTo jQuery plugin:

http://demos.flesler.com/jquery/scrollTo/

and repeat a function using setTimeout(function(){ $.scrollTo('#element'); }, 5000);

Answer 3

With core javascript:

<div class="container" style="width:500px; max-width:500px; height:100px; max-height:100px; background:#F00; overflow:hidden;">
    <div class="element_01" style="width:500px; height:100px; float:left;">aaa</div>
    <div class="element_02" style="width:500px; height:100px; float:left;">bbb</div>
</div>

<script>
var container=document.getElementsByClassName('container')[0];
var start = 0;
var smoothVal = 20;
var waitVal = 5000;
function smooth(){
    var interval=setInterval(function(){

          start++;
          container.scrollTop = start;
        if(start>100) {
              clearInterval(interval);
            wait();
        } 
      },smoothVal)
}

function wait(){
    start = 0;
    container.scrollTop = start;
       setTimeout(function(){


              smooth();

            },waitVal)
}
smooth();

</script>