繁体   English   中英

当前滚动到检测的iScroll页面

[英]iScroll page currently scrolling to detection

我使用以下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();
        });

因此,有没有机会在beforeScrollStartscrollStart 检测 到要滚动到 的页面 触发该页面项目动画要知道这一点很重要。 谢谢!

我已经使用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/

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM