【问题标题】:fullPage.js On mobile chrome, trying to scroll up causes page reloadfullPage.js 在移动 chrome 上,尝试向上滚动会导致页面重新加载
【发布时间】: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 会帮助重新加载页面。我想阻止这种情况发生。

标签: javascript fullpage.js


【解决方案1】:

根据图书馆作者的帮助 (https://github.com/alvarotrigo/fullPage.js/issues/2277),我现在可以通过设置 scrollBar:true and autoScrolling:true 的解决方案来解决问题

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-10-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多