Question

The scrolling functionality of http://www.smoothdivscroll.com is exactly what we are looking for however we have a specific need to have the scroll “pause” when you move over the images in the slider and then when you mouse out the scroll would play again. Currently when you mouse over the images the scroll continues, how can we pause and play it upon mouse over and mouse out? Same thing with the left and right arrows. Once you interact with those, the scroller stops completely, we’d like it to play again automatically after you mouse out from the arrows.

Any helps would be greatly appreciated!

Answer 1

$(document).ready(function() {
$("#makeMeScrollable").smoothDivScroll({
    mousewheelScrolling: true,
    manualContinuousScrolling: true,
    visibleHotSpotBackgrounds: "always",
    autoScrollingMode: "always"
});

// Mouse over
$("#makeMeScrollable").bind("mouseover", function(){
    $("#makeMeScrollable").smoothDivScroll("stopAutoScrolling");
});

// Mouse out
$("#makeMeScrollable").bind("mouseout", function(){
    $("#makeMeScrollable").smoothDivScroll("startAutoScrolling");
});



});​

This should work, test here http://jsfiddle.net/EEAFs/