javascript - 在手机上，当用户滚动屏幕顶部 "past"时检测

Question

想象一个移动网页，页面顶部有一个导航栏。

使用 javascript/jQuery 我希望能够检测用户何时滚动“超过”屏幕顶部。

让我试着解释一下:假设网页刚刚加载，您会在屏幕的最顶部看到导航栏。现在，您将手指放在屏幕上并向下 拖动。在 iPhone 上，这看起来像:

我正在寻找类似于以下内容的内容:

$(document).ready(function () {
  $(window).scroll(function (event) {

    var y = $(this).scrollTop();
    if(y < -20)) {
        //do something
    }

不幸的是，这在 Android 手机上不起作用，因为它们不具有与 iPhone 相同的弹性行为:

Answer 1

坏消息

那么，让我们先从坏消息说起:无法在 native 获取您想要的信息。为什么？因为一旦您进入“弹性”区域，您就会向下拖动整个 webview 组件，而不是像您的伪代码中那样仅仅拖动文档的内容。

这实际上意味着什么？仿真或 native 包装

模拟，选择

因此您必须运行自己的解决方案，并且必须做出几个选择。首先，如果您希望使用弹性滚动，您应该注意这是 Apple Inc. 的专利 US7469381 B2。 .请仔细阅读此专利，以确保您不会侵权(即使您构建的是仅限 iOS 的应用程序，这也不会改变任何内容)。

其次，问题是您是否真的想模仿原生体验。由于 1) 认为它永远不够完美，并且 2) 随着操作系统和浏览器的更改，您的代码将保持过时状态，因此看起来很糟糕/怪异，甚至可能会导致完全意外的行为/组合。

其次，您必须决定是希望在 Android 上获得相同的弹性行为，还是希望在 Android 上提供更原生的体验。就我个人而言，我认为它会带来一些出色的用户体验，因此我不会明确反对您使用弹性效果，但是您应该仔细考虑这一点。

模拟，脚本

大多数提供与您想要的类似模拟的脚本都是“拉动刷新”脚本。根据您的具体愿望，您应该简单地使用其中一个脚本并更改它们或使用一些 CSS 将消息隐藏在其中。

• Hook.js - 不完美模拟原生体验并使用旧的 iOS 背景，但仍然是一个不错的选择，只需使用即可隐藏微调器

  .hook-spinner{
       display:none;
  }
  

• iScroll.js - 非常完善的代码并且表现出色。缺点是它提供的内容比您正在寻找的要多得多，这可能是好事也可能是坏事。您可以找到下拉刷新行为的示例实现 here ，但请注意它是针对旧版本的 iScroll，在上一个版本中该示例似乎尚未实现，但应该非常相似。只需查看代码即可了解如何删除下拉刷新消息。

• jQuery scrollz - 多一种选择。好像可以媲美hook.js ，但也有一些类似 iScroll 的功能。您可以通过使用空 HTML 字符串指定 pullHeaderHTML 来“删除”消息。

原生包装

我相信您不想做的另一种选择是将您的应用程序作为 native 应用程序分发，例如 bundle 在 phonegap 中，但为了完整起见我确实想添加。然而，要实现这一点，需要对 phonegap 代码本身进行大量更改，这不是一种可取的方法(我曾经开发过一个 phonegap 应用程序，使用 native 组件和“围绕”它的交互触发各种 javascript 事件，尽管可行并呈现某些优点，这不是我的建议)。