【发布时间】:2016-09-20 23:39:20
【问题描述】:
iOS 移动 Chrome 浏览器。
我有一个使用 fullPage.js 的多部分页面,由于 Chrome 的“下拉以重新加载页面”功能,它在除移动 Chrome 浏览器之外的所有情况下都能完美运行。
如果您尝试向上滚动(通过向下滑动手指),它将重新加载到页面。如果你玩它,你会发现快速滑动可以让你正常滚动,但如果你以更自然的方式滑动,就像有人习惯在网站上滚动一样,它首先会“粘住”,然后重新加载页面,而不是向上滑动到下一页。
这会导致极差的用户体验,因为每当用户尝试向上滚动时,他们都会看到带有重新加载/关闭/返回按钮的小 chrome 菜单栏。
https://fiddle.jshell.net/imac/kemtmm9a/embedded/result/ 如果没有 jsfiddle 标头,问题会更清楚地呈现出来,但您绝对可以看到这里发生了什么。
更新
在使用在线找到的各种解决方案对此进行测试时,问题的根源似乎源于 window.pageYOffset 始终为 0,无论用户在页面上的哪个位置。这似乎是 fullPage.js 运作方式的核心,这是有道理的;但是,Chrome 会在 window.pageYOffset=0 时检测到向上滚动,并在此时启用拉动刷新。当用户尝试滚动时,我正在尝试通过一些 JS 来使用 preventDetault,但它要么不起作用,要么导致 fullPage.js 失控。
【问题讨论】:
-
这不是真正的解决方案,但不要试图发明自己的滚动行为。这对用户来说只是烦人的。如果设计师要求我这样做,因为他们看到了一个很棒的网站,可以在他们完美的 Apple 产品上完美运行,我会说不,它不可避免地会在某个地方失败。话虽如此,它确实适用于我的 Android Chrome。其实挺好的。但是你有没有研究过滚动捕捉点?
-
@powerbuoy 我一定没有很好地解释我的问题。我正在使用 3rd 方库 fullPage.js 来制作一系列整页感觉部分,这些部分都位于一个 html 页面中。它管理滚动、对齐滚动、平滑滚动等......并且在所有设备和所有浏览器上都能完美运行。我的具体问题仅与 Chrome 的移动浏览器(iOS 和 Android)有关。由于库的性质,window.pageYOffset 始终等于 0。当它为 0 并且用户尝试向上滚动时,Chrome 会帮助重新加载页面。我想阻止这种情况发生。