Question

关于iScroll 4的另一个问题。我已经设置了demo in JSFiddle。

我想在div上滚动mousedown。它应滚动到结尾：

连续;
没有任何中断;
静态速度;

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

有可能实现这个目标吗？

Answer 1

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使用CSS translate进行滚动，我找不到从中获取当前翻译的方法。目前正在寻找解决方案。

<强>更新

iScroll有一个useTransform选项，使用它我们可以要求它不使用translate而是使用CSS left属性进行滚动。通过这种方式，我们可以轻松识别是否已达到目标（无论哪种方式）。要使用，只需在启动iScroll时设置useTransform: false。

更新2

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

Answer 3

我修改了 @techfoobar 代码并做了类似这样的事情，它们不断滚动直到mousedown结束，并在单击时移动或移出一个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 在他的回答中提到的问题仍然没有解决。

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

3 个答案: