Infinite Horizontal Scrolling Div

Question

I need to have a div that will scroll horizontally as you move your mouse further to the right or the left of the div.

I found the Smooth Div Scroll plugin (http://www.smoothdivscroll.com/) that is really close to what I need. However, there are a couple problems with this.

1. I need to be able to make the scrolling element start at a set position (i.e. left:-340px). This plugin only allows you to be able to set a starting element, not an actual position.

2. I need the scrolling element to be infinite. So, if I'm scrolling to the right, when it gets to the end, it should keep going to the right and repeat the element from the beginning.

If someone could help me find a solution for these items or at least point me in the right direction, I would be very appreciative.

Answer 1

1. Basically you can set the autoScrollDirection option to endlessloopright and it will continuously auto scroll to the right; but when you try to manually scroll the window, it stops at the end. I believe it would require modifying the plugin code to make the manual scroll do scroll continuously.

2. You can set the change the position of the scroller by using the plugin's API. Try this:

   // Do not include "px" and this number should be positive
   var position = "400";
   $('#makeMeScrollable')
     .data('startingPosition', position)
     .data('scrollXPos', position)
     .smoothDivScroll('recalculateScrollableArea');
   

   Here is a demo to show it in action. One problem though, if you use the enlessloopright option above, the position changes each time you call this function because the content is rearranged.