[thelist] DHTML Scrolling Area

Lee Kowalkowski lee.kowalkowski at googlemail.com
Thu Jan 10 15:43:05 CST 2008

On 10/01/2008, Noah St. Amand <noah at tookish.net> wrote:
> Hi,
> <http://tookish.net/temp/scroll.html>
> What I can't figure out is how to make it loop smoothly, i.e., to have
> the 9 slide across the container followed by the 0 1 2 3 etc. Right
> now, when it gets to the end (9), it stops and starts over again.
> Any advice greatly appreciated.

Hmm, seems there are three options, so, easiest to hardest...

1/ Add 100% horizontal padding either side so content enters from
right and leaves completely before it restarts.

2/ Duplicate the content, reset after 1/2 way (when repeated content
is in the starting position of the original content, perhaps the
instant before).  Hopefully it will be a seamless illusion.

3/ Divide scroll content into at least 3 elements (might need more
depending on dimensions), as one element disappears off the left, move
it to the right, will need to happen outside the clipped area to be
seamless (and you'll need to jerk/reset the scrolling to compensate
the removal of content off the left).

Options 2 & 3 get progressively worse for screen readers, and
accessibility guidelines state you'll need to provide a way to stop
the scroll too.


More information about the thelist mailing list