iScroll页面当前正在滚动检测

iScroll page currently scrolling to detection

本文关键字：滚动 检测 iScroll      更新时间：2023-09-26

我使用以下iScroll 5代码（通常不那么重要：只是一个常见的逐页滚动）：

        var myScroll = new IScroll('.scroller', {
            mouseWheel: true,
            scrollbars: true,
            keyBindings: {
                // doesn't matter
            },
            preventDefault: false,
            fadeScrollbars: true,
            snap: 'section', // <-- that's the key
            wheelAction: 'scroll',
        });
        myScroll.on('beforeScrollStart', function (e) {
            myScroll.preventDisabling = true;
        });
        myScroll.on('scrollMove', function (e) {
        });
        myScroll.on('scrollStart', function (e) {
            // !!! I need the detection somewhere here !!!
            if (!myScroll.preventDisabling) {
                myScroll.disable();
                disabledWasCalledInMeanwhile = true;
            }
            myScroll.preventDisabling = false;
        });
        var disabledWasCalledInMeanwhile = false;
        // that's just to prevent jumping to another page before scrolling is finished
        myScroll.on('scrollEnd', function (e) {
            disabledWasCalledInMeanwhile = false;
            window.setTimeout(function () {
                if (!disabledWasCalledInMeanwhile)
                    myScroll.enable();
            }, 250);

            $('.labels>*').toggleClass('active', false)
                .eq(this.currentPage.pageY).toggleClass('active', true);
        });
        myScroll.on('scrollCancel', function (e) {
            myScroll.enable();
        });

那么，是否有机会在beforeScrollStart或scrollStart中检测我要滚动到的页面？这对于触发页面项动画很重要。谢谢

我已经使用iScroll很多年了（它是一个优秀的库），但我不知道有什么内置的方法。iScroll快照之前的所有滚动事件（除了scrollEnd）都已确定。不过，只要稍微修改一下图书馆，我相信这是可能的。

首先，进入iScroll.js源代码，找到_nearestSnap方法。在该方法的底部，您会发现所查找的对象已返回。在返回之前，获取该数据并将其传递给自定义事件。不幸的是，iScroll的事件系统不允许您将自定义变量传递给事件，因此您必须进行变通。此外，您还需要跟踪"flick"事件，因为它不会触发_nearestSnap方法。

_nearestSnap方法中的iScroll修改

this.customSnap({
    x: x,
    y: y,
    pageX: i,
    pageY: m
});

更新到类实例。注意添加了"customSnap"方法和flick事件。

myScroll = new IScroll('#wrapper', {snap: "p"});
myScroll.customSnap = function(data) {
    console.log(data);
};
myScroll.on('flick', function() {
    console.log(data.currentPage);
});

这应该可以。不一定是最干净的更新，但在我的测试中，它确实有效。

http://jsfiddle.net/9pa4th4y/

相关文章：