Scroll the div till the last div on mousedown

Question

Another question on iScroll 4. I have set up a demo in JSFiddle.

I want to scroll the div on mousedown. It should scroll to the end:

• continuously;
• without any interruption;
• with static speed;

Until it reaches the last div, or I do a mouseup in the middle.

Is it possible to achieve this?

Answer 1

Check this fiddle: http://jsfiddle.net/z2YWZ/2/

There is still one problem. It doesn't stop when it reaches the end. iScroll uses CSS translate to do the scrolling and I couldn't find a way to get the current translation form it. Currently looking for a solution for that.

UPDATE

iScroll has a useTransform option, using which we can ask it not use translate and instead use CSS left property for scrolling. This way we'll be easily able to identify whether its the end has been reached (either way). To use, simply set useTransform: false while initing iScroll.

UPDATE 2

Check this fiddle: http://jsfiddle.net/z2YWZ/12/

Answer 2

Can you check this solution: http://jsfiddle.net/ugeU3/3

html:

<div id="click">Element to click on</div>

js:

jQuery("#click").bind('mousedown', function(){
    intInterval=setInterval(function(){
            myScroll.scrollTo(25, 0, 800, true);
    },30);
});
jQuery("#click").bind('mouseup', function(){
    intInterval=window.clearInterval(intInterval);
});

you can change the time values to achieve your speed-preferences. i hope it helps.

Answer 3

I have modified @techfoobar code and done something like this which both scrolls continously till end on mousedown and moves one div in or out on single click. The code snippet is :

        var scrolling=false;
        var scrollTimer=-1;
        $('#next').bind('mousedown',function () {
            scrolling = true;
            scrollTimer = setInterval(function () {
                scrollDivRight();
            }, 100);
            return false;
        });
        $('#next').bind('mouseup',function () {
            scrolling = false;
            clearInterval(scrollTimer);
            return false;
        });
        $('#next').bind('mouseout',function () { /*For smoother effect and also prevent if any previous delay (eg. 100ms)*/
            scrolling = false;
            clearInterval(scrollTimer);
            return false;
        });
        scrollDivRight:function(){
            if(!scrolling) return false;
            myScroll.scrollTo(177, 0, 400, true);       
        }

Please suggest if there is anything better then this. Ofcourse the issue mentioned by @techfoobar in his answer still remains unsolved.