FullPage scrollOverflow部分使用iScroll scrollTo()错误进行滚动

时间:2019-08-01 06:58:21

标签: javascript fullpage.js iscroll

我正在使用FullPage和scrollOverflow:true,我需要滚动到可滚动部分中的某个位置。 FullPage对那些溢出部分使用iScroll插件的分叉版本。

所以我正在做的是:

  • 将整页滚动到第
  • 部分
  • 在该部分中找到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部分的标题,并且可以滚动至不可见的红色区域

1 个答案:

答案 0 :(得分:0)

几件事:

  • 您需要为iscroll try { JSONObject mainObject = new JSONObject(data); JSONArray jsonArray = mainObject.getJSONArray("resource"); for(int i=0;i<jsonArray.length;i++ ){ JSONObject obj= josnArray.getJsonObject(i); String lat = obj.getString("lat"); String lng = obj.getString("lon"); } } catch (Exception e) { e.printStackTrace(); } 的y位置使用负值。
  • 您无需调用fullPage.js的刷新功能,而只需调用iScroll中的刷新功能即可。

此处的代码:

scrollTo

Reproduction online