使用 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 滚动期间报告部分内的 y 位置吗？（使用 iscroll-probe）
【发布时间】：2016-09-07 00:28:14
【问题描述】：

我正在使用最新版本的 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位置？

【问题讨论】：

标签： javascript jquery fullpage.js iscroll

【解决方案1】：

确实有可能。尽管 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 参数扩展默认的滚动溢出选项。

然后混合在一起......

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

【讨论】：

嗨，阿尔瓦罗。首先，作为第一次发帖，我必须感谢您的回复和帮助。多年来一直在 stackoverflow 上寻找答案，但从未提供过问题或答案。（是时候开始自力更生了）。
其次，这肯定会帮助解决我的问题，我现在正在我的项目中对其进行测试，但是您创建的 jsfiddle 中似乎已经存在问题。为什么向下滚动时会被锁定到第二部分？我已经分叉了小提琴并添加了更多部分。 jsfiddle.net/fv0ee9xg在第 2 节第一次滚动溢出时，无法到达第 3 节或返回第 1 节。
正如我所说，iScroll 有问题。您需要根据我发布的链接对探针版本进行更改，以便能够将其与 fullpage.js 一起使用。 Fullpage.js 使用 iScroll 的一个分支来解决这些错误。
一开始我不明白，但我你到 github 的链接解释了它。谢谢你。我将发布一个完整工作的 jsfiddle 和 scrolloverflow.js (iscroll.js) 的编辑版本，以防其他人将来需要它。再次感谢您的帮助和出色的插件。
嗨，在这个对 fullPage 存储库的拉取请求中，我们有一个 scrolloverflow-probe.js，github.com/alvarotrigo/fullPage.js/pull/2531 我已经在我的项目上进行了测试，并且像一个魅力一样工作。

【解决方案2】：

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

【讨论】：

永远不要低估 fullpage.js 的力量！ :) 我上面的回答