使用 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 作为此选项,并且我包含了 "probe" 版本的 iscroll。像这个例子...
http://lab.cubiq.org/iscroll5/demos/probe/
iscroll-probe 能否报告当前正在滚动整页"section"的y 位置?
我认为这是不可能的,因为这两个插件将尝试使用相同的 'element',在同一时间以不同的方式工作。所以,它当然会相互冲突。对不起,请尝试其他方式。 :/
确实可以。虽然 iScroll 库有 some bugs that were solved for its use in 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);
}
我正在使用最新版本的 fullpage.js,并将 scrollOverflow 选项设置为 true。像这个例子... http://alvarotrigo.com/fullPage/examples/scrolling.html
Fullpage.js 使用 iscroll.js 作为此选项,并且我包含了 "probe" 版本的 iscroll。像这个例子... http://lab.cubiq.org/iscroll5/demos/probe/
iscroll-probe 能否报告当前正在滚动整页"section"的y 位置?
我认为这是不可能的,因为这两个插件将尝试使用相同的 'element',在同一时间以不同的方式工作。所以,它当然会相互冲突。对不起,请尝试其他方式。 :/
确实可以。虽然 iScroll 库有 some bugs that were solved for its use in 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);
}