使用 Iscroll 重置自动滚动间隔答案

【问题标题】：Resetting autoscroll intervals with Iscroll使用 Iscroll 重置自动滚动间隔
【发布时间】：2017-05-13 18:00:44
【问题描述】：

我正在尝试使用 iScrolljs 构建带有轮播的页面。轮播的位置应该跟随我在视频中的位置。这与问题无关，但我认为我应该提供尽可能多的信息。

自动滚动有效，但我也希望用户能够自行滚动。问题是，当您现在滚动时，每次调用间隔时，轮播都会滚动到上一个位置。我正在尝试清除间隔并重置它们，但它似乎不起作用。这就是我所拥有的：

    video.onplay = function(){
myScroll = new IScroll('#carWrapper',{
                scrollX: true,
                scrollY: false,
                momentum: false,
                click:true,
                mouseWheel:true,
                tap: true,
                keyBindings: true
            });

scroll();
    };

    function checkMoved(){
if(document.getElementById('carWrapper')){
        if(!scroller.moved){
                var scrollPos = (video.currentTime/video.duration)*4800;
                myScroll.scrollTo(-scrollPos,0,1000,IScroll.utils.ease.elastic);
        }
    }

if(myScroll.moved){
    clearInterval(scrollInterval);
    myScroll.moved = false;
    setTimeout(scroll(),10000);
}
    }

   function scroll(){
scrollInterval = setInterval(checkMoved,5000);
   }

提前致谢！

【问题讨论】：

标签： javascript iscroll

【解决方案1】：

我认为浏览器看不到 scrollInterval 函数 checkMoved() 你必须全局声明它然后在滚动函数中分配它

var scrollInterval;
video.onplay = function () {
    myScroll = new IScroll('#carWrapper', {
        scrollX: true,
        scrollY: false,
        momentum: false,
        click: true,
        mouseWheel: true,
        tap: true,
        keyBindings: true
    });

    scroll();
};

function checkMoved() {
    if (document.getElementById('carWrapper')) {
        if (!scroller.moved) {
            var scrollPos = (video.currentTime / video.duration) * 4800;
            myScroll.scrollTo(-scrollPos, 0, 1000, IScroll.utils.ease.elastic);
        }
    }

    if (myScroll.moved) {
        clearInterval(scrollInterval);
        myScroll.moved = false;
        setTimeout(scroll(), 10000);
    }
}

function scroll() {
    scrollInterval = setInterval(checkMoved, 5000);
}

【讨论】：

【解决方案2】：

我稍微修改了代码并让它工作了。

    video.onplay = function(){
myScroll = new IScroll('#carWrapper',{
                scrollX: true,
                scrollY: false,
                momentum: false,
                click:true,
                mouseWheel:true,
                tap: true,
                keyBindings: true
            });

scrollInterval = setInterval(function(){
    if(myScroll.moved){
        resetInterval();
        myScroll.moved = false;
    }
    else if(document.getElementById('carWrapper')){
        if(!scroller.moved){
                var scrollPos = (video.currentTime/video.duration)*4800;
                myScroll.scrollTo(-scrollPos,0,1000,IScroll.utils.ease.elastic);
        }
    }
},5000);
   };

    function resetInterval(){
clearInterval(scrollInterval);
scrollTimeout = setTimeout(function(){
    scrollInterval = setInterval(function(){
        if(myScroll.moved){
            resetInterval();
            myScroll.moved = false;
        }
        else if(document.getElementById('carWrapper')){
            if(!scroller.moved){
                var scrollPos = (video.currentTime/video.duration)*4800;
                myScroll.scrollTo(-scrollPos,0,1000,IScroll.utils.ease.elastic);
            }
        }
    },5000);
},10000);
    }

这可能不是最干净的代码，但我很高兴它可以工作。

【讨论】：