使用Fullpage.js,在scrollOverflow滚动期间是否可以报告部分内部的y位置? (使用iscroll-probe)

时间:2016-09-07 00:28:15

标签: javascript jquery fullpage.js iscroll

我正在使用最新版本的fullpage.js,并将scrollOverflow选项设置为true。像这个例子...... http://alvarotrigo.com/fullPage/examples/scrolling.html

Fullpage.js使用iscroll.js作为此选项,我已经包含了iscroll的“探测”版本。像这个例子...... http://lab.cubiq.org/iscroll5/demos/probe/

iscroll-probe是否可以报告当前正在滚动整页“部分”的 y位置

2 个答案:

答案 0 :(得分:4)

确实有可能。虽然iScroll库的some bugs that were solved for its use in fullpage.js带有scrolloverflow.js fork。我建议你自己在iScroll Probe中进行这些更改。

关于如何获取滚动的位置,只需看看您提供的源示例,以了解要使用的iscroll事件。

然后,只需获取可以使用以下内容提取的部分的iscroll实例:

$('.fp-section.active').find('.fp-scrollable').data('iscrollInstance');

或者来自活动幻灯片:

$('.fp-section.active').find('.fp-slide.active').find('.fp-scrollable').data('iscrollInstance');

并使用iScroll选项probeType:3,详见其文档。为此,请使用scrollOverflowOptions参数扩展默认的scrolloverflow选项。

将所有人混在一起......

Reproduction online

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    scrollOverflow:true,
    scrollOverflowOptions: {
        probeType: 3
    },
    afterLoad: function(anchorLink, index){
       var iscroll = $('.fp-section.active').find('.fp-scrollable').data('iscrollInstance');

       if(iscroll && typeof iscroll !== undefined){
            iscroll.on('scroll', getScroll);
       }
    }
});

function getScroll(){
   console.log(this.y);
   $('#position').text(this.y);
}

答案 1 :(得分:-1)

我认为这是不可能的,因为两个插件都会尝试同时使用相同的“元素”,并且方式不同。所以,当然,它会相互冲突。对不起,请尝试另一种方式。 :/