Getting a SmoothDivScroll to start in the center of the scrollable area

Question

I am trying to connect the jQuery SmoothDivScroll plugin ( http://www.smoothdivscroll.com/ ) to start at the center of the content it contains, so there are scroll bars on the left and right when loading. I know that there is a startAtElementId option, but this does not allow me to start in the center.

I tried to calculate the center point and apply it to the corresponding elements, but the left scroll always stops before it is expected, and the right elements will fall under it.

Tried using this Js with no luck:

$("div#scroller").smoothDivScroll(); var halfWayDoc = $(document).width() / 2; var halfWayScrollArea = $("#scroller .scrollableArea").width() /2; var halfWay = halfWayDoc - halfWayScrollArea; var scrollArea = $("#scroller .scrollableArea").width(); var scrollAreaAdjust = scrollArea + halfWay; $("#scroller .item:first-child").css("margin-left",halfWay); $("#scroller .item:last-child").css("margin-right",halfWay); $("#scroller .scrollableArea").width(scrollAreaAdjust); 

HTML looks like this:

 <div id="scroller"> <div class="scrollingHotSpotLeft"></div> <div class="scrollingHotSpotRight"></div> <div class="scrollWrapper"> <div class="scrollableArea"> <div class="item"> <img src="assets/images/detail/Erdem-AW-11-B2-sml.jpg" alt="example"/> </div> ... <div class="item"> <img src="assets/images/detail/Erdem-AW-11-B2-sml.jpg" alt="example"/> </div> </div> </div> </div> 

Any help or pointers are appreciated.

Cheers, Shaun

Answer 1

Here is the solution I propose :-)

 // Element for Scroll var scrollElement = $("div#scroller"); // Enable Smooth Div Scroll scrollElement.smoothDivScroll(); // Find out Scrollable area width var halfWidth = $("div#scroller .scrollableArea").width()/2; // Force scroller to move to half width :-) scrollElement.data("scrollWrapper").scrollLeft(halfWidth); 

I am updating the script, so you can take a look at this update:

• http://jsfiddle.net/3A9Zy/

Hope this helps :-)

Answer 2

In the basic example, the site http://www.smoothdivscroll.com/index.html#quickdemo implemented functionality. Animation starts with image with id "startAtMe"

$("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onstart", autoScrollDirection: "backandforth", autoScrollStep: 1, autoScrollInterval: 15, startAtElementId: "startAtMe", visibleHotSpots: "always" });

. Have you tried to specify the identifier of the element you want to start with and pass startAtElementId: "startAtMe" to the smoothDivScroll function?