How to constantly scroll through content in a DIV using jQuery?

Question

target

The goal is to have a DIV container with a fixed height and width, and the HTML content in that DIV will automatically scroll vertically continuously.

Question: Basically, I created the code below, using jQuery to scroll (move) the child DIV vertically up until it goes beyond the parent field, where the animation then terminates, which calls an event handler that resets the position of the child DIV and starts the process. again.

This works fine, so the content scrolls up, leaving a blank space, and then starts again from the bottom and scrolls up.

The problem I am facing is that for this it is necessary that the content looks as if it is being repeated continuously, see the diagram below to better explain this, is there any way to do this? (I do not want to use third-party plugins or libraries other than jQuery):

_{(source: cameroncooke.com )}

What i have so far

HTML:

<div id="scrollingContainer"> <div class="scroller"> <h1>This is a title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at orci mi, id gravida tellus. Integer malesuada ante sit amet enim pulvinar congue. Donec pulvinar dolor et arcu posuere feugiat id et felis.</p> <p>More content....</p> </div> </div> 

CSS:

 #scrollingContainer{ height: 300px; width: 300px; overflow: hidden; } #scrollingContainer DIV.scroller{ position: relative; } 

JavaScript:

 /** * Scrolls the content DIV */ function scroll() { if($('DIV.scroller').height() > $('#scrollingContainer').height()) { var t = $('DIV.scroller').position().top + $('DIV.scroller').height(); /* Animate */ $('DIV.scroller').animate( { top: '-=' + t + 'px' } , 4000, 'linear', animationComplete); } } function animationComplete() { $(this).css('top', $('#scrollingContainer').height()); scroll(); } 

Answer 1

You will need to duplicate the content element and align them so that they are vertically next to each other and scroll them in tandem. Your current scroll should work, the jump will be invisible, because it must jump from the top of the bottom element to the top of the top element, that is, to the same part. I would put both copies of the content (you can just .clone it to get another copy) in the container and scroll it, so you don’t have to worry about moving the two elements.

If you want to truly optimize it, you can only display the top (enough to hide the jump) of the content in the bottom element, but if your content is really complex and heavy, it's not worth the effort.

Answer 2

Do you want the content to "automatically repeat" and scroll forever? You should be able to add a new DIV below the text and copy this text into the new DIV. Do this based on the scroll position by removing the div above when it gets out of view. Basically, you just copy the text by clicking on the new DIV at the bottom of the “stack” and pushing it from above when it comes out of sight.

Answer 3

Simply put, you will need two divs that are larger than the scroll box, and you will need to move the move, which is not visible below what is. If they are the same, it should not be noticeable.

Answer 4

Try the following:

 $('.upBut').bind('click',function(){ $('.articleWrapper').prepend($('.article:last')).children('.article:first').css({display:'none'}).show('slow'); }); $('.downBut').bind('click',function(){ //$('.articleWrapper').append($('.article:first')).children('.article:last').css({display:'none'}).show('slow'); $('.article:first').hide('slow',function(){$(this).appendTo('.articleWrapper').show('slow');}); }); $('.upBut').hover(function(){$(this).css("background-image", "url(images/up_green.png)");},function(){$(this).css("background-image", "url(images/up_red.png)");}); $('.downBut').hover(function(){$(this).css("background-image", "url(images/down_green.png)");},function(){$(this).css("background-image", "url(images/down_red.png)");}); 

A working example can be seen here: http://www.timeswellness.com/index.aspx?page=others&rightnav=false&do=CancerDay