全页滚动流部分用isCroll scrollto()bug滚动



我正在使用scrolloverflow的全页:true,我需要滚动到可滚动部分中的某个位置。全页用于这些溢出部分的iScroll插件的分叉版本。

所以我在做的是:

  • fire fulpage滚动到部分
  • 在该部分中查找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节标题,您可以滚动到红色区域,不应该看到

几件事:

  • 您需要为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);
});

在线繁殖。

最新更新