使用 iScroll scrollTo() 错误滚动的 FullPage scrollOverflow 部分答案

【问题标题】：FullPage scrollOverflow section scrolled with iScroll scrollTo() bug使用 iScroll scrollTo() 错误滚动的 FullPage scrollOverflow 部分
【发布时间】：2019-08-01 06:58:21
【问题描述】：

我将 FullPage 与 scrollOverflow: true 一起使用，我需要滚动到可滚动部分中的某个位置。 FullPage 对这些溢出部分使用分叉版本的 iScroll 插件。

所以我正在做的是：

触发 FullPage 滚动到部分
在该部分中找到 iScroll 的实例并触发它的 scrollTo() 事件
reBuild() 整页

两个插件的滚动位置都正确改变，但问题似乎是 FullPage 没有注册 iScroll 的 scrollTo() 事件并且表现得像活动部分滚动到顶部，所以基本上向上滚动可以让你到上一个部分向下滚动最终会让您进入内容。

document.querySelector('.button').addEventListener('click', e => {
  fullpage_api.moveTo(3)
  fullpage_api.getActiveSection().item.querySelector('.fp-scrollable').scrollTo(0, 1000, 1000)
  fullpage_api.reBuild()
})

这是我的代码的简化版本，其中重现了错误：https://jsfiddle.net/5bojtrmd/13/

点击按钮后，您无法再进入第 3 节标题，您可以滚动到不应该看到的红色区域

【问题讨论】：

标签： javascript fullpage.js iscroll

【解决方案1】：

几件事：

您需要为 iscroll scrollTo y 位置使用负值。
您不必调用 fullPage.js 的刷新函数，而是调用 iScroll 中的刷新函数。

代码在这里：

document.querySelector('.button').addEventListener('click', e => {
    fullpage_api.moveTo(3)

    var instance = fullpage_api.getActiveSection().item.querySelector('.fp-scrollable').fp_iscrollInstance;
    instance.scrollTo(0, -1050, 1000);
     setTimeout(function () {
        instance.refresh();
    }, 1000 + 150);
});

Reproduction online.

【讨论】：