fullPage.js 在移动设备上 chrome,尝试向上滚动会导致页面重新加载

fullPage.js On mobile chrome, trying to scroll up causes page reload

iOS 移动 Chrome 浏览器。

我有一个使用 fullPage.js 的多部分页面,由于 Chrome 的 "pull down to reload page" 功能,在除移动 Chrome 浏览器之外的所有情况下都能完美运行。

如果您尝试向上滚动(通过向下滑动手指),它将重新加载到页面。如果你玩过它,你会发现快速滑动可以让你正常滚动,但如果你以更自然的方式滑动,就像过去在网站上滚动的人一样,它首先会 "stick" 然后只是重新加载页面,而不是向上滑动到下一页。

这会导致极差的用户体验,因为每当用户尝试向上滚动时,他们都会看到带有 reload/close/back 按钮的小 chrome 菜单栏。

https://fiddle.jshell.net/imac/kemtmm9a/embedded/result/ 如果没有 jsfiddle header,问题会更清楚地呈现出来,但您绝对可以看到这里发生了什么。

更新

在使用在线找到的各种解决方案对此进行测试时,问题的根源似乎源于 window.pageYOffset 始终为 0 的事实,无论用户在页面上的哪个位置。这似乎是 fullPage.js 如何运作的核心,这是有道理的;但是,Chrome 在 window.pageYOffset=0 时检测到向上滚动,并在那时启用拉动刷新。当用户尝试滚动时,我正在尝试通过一些 JS 来使用 preventDetault,但它要么不工作,要么导致 fullPage.js 失控。

根据库作者的帮助 (https://github.com/alvarotrigo/fullPage.js/issues/2277),我现在可以使用他的设置 scrollBar:true and autoScrolling:true

解决方案

这会导致 yOffset 正常运行并且 Chrome 不会自动刷新