使用Fullpage.js，可以在scrollOverflow滚动期间报告节内的y位置吗? (使用iscroll-probe) [英] With Fullpage.js, can y-position inside sections be reported during scrollOverflow scrolling? (using iscroll-probe)

问题描述

我使用的是最新版本的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位置?

解决方案

这确实是可能的.尽管iScroll库具有一些错误，但这些错误已通过在fullpage.js 中使用scrolloverflow.js分支.我建议您自己在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选项.

混合在一起...

在线复制

$('#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);
}

I'm using the latest version of fullpage.js with the scrollOverflow option set to true. Like this example... http://alvarotrigo.com/fullPage/examples/scrolling.html

Fullpage.js uses iscroll.js for this option, and I have included the "probe" version of iscroll. Like this example... http://lab.cubiq.org/iscroll5/demos/probe/

Can iscroll-probe report the y position of whichever fullpage "section" is currently being scrolled?

解决方案

It is indeed possible. Although the iScroll library has some bugs that were solved for its use in fullpage.js with the scrolloverflow.js fork. I would suggest you to do those changes yourself in the iScroll Probe.

Regarding how to get the scrolling possition, just take a look at the source example you provided to know which iscroll events to use.

Then, just take the iscroll instance of the section that can be extracted with:

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

Or from the active slide:

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

And use the iScroll option probeType:3 as detailed in their docs. To do so extend the default scrolloverflow options with the scrollOverflowOptions param.

And mixing all together...

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);
}

这篇关于使用Fullpage.js，可以在scrollOverflow滚动期间报告节内的y位置吗? (使用iscroll-probe)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！