javascript - 滚动 div 直到 mousedown 上的最后一个 div

Question

关于iScroll 4的另一个问题。我在 JSFiddle 中设置了一个演示。

我想滚动divon mousedown。它应该滚动到最后：

• 连续不断；
• 没有任何中断；
• 以静态速度；

直到它到达最后一个div，或者我mouseup在中间做一个。

有可能实现这一目标吗？

Answer 1

你能检查一下这个解决方案吗：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);
});

您可以更改时间值以实现您的速度偏好。我希望它有帮助。

Answer 2

检查这个小提琴：http: //jsfiddle.net/z2YWZ/2/

还有一个问题。当它到达终点时它不会停止。iScroll 使用 CSStranslate进行滚动，我找不到获取当前翻译形式的方法。目前正在为此寻找解决方案。

更新

iScroll 有一个 useTransform 选项，使用它我们可以要求它不使用 translate 而是使用 CSS left 属性进行滚动。这样我们就可以很容易地确定它是否已经到达终点（无论哪种方式）。要使用，只需useTransform: false在启动 iScroll 时进行设置。

更新 2

检查这个小提琴：http: //jsfiddle.net/z2YWZ/12/

Answer 3

我已经修改了@techfoobar代码并做了类似的事情，它在鼠标按下时连续滚动直到结束，并在单击时将一个 div 移入或移出。代码片段是：

        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);       
        }

请建议是否有比这更好的东西。当然， @techfoobar在他的回答中提到的问题仍然没有解决。