在手机上，检测用户何时滚动＆＃34;过去＆＃34;屏幕上方

Question

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

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

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

我正在寻找类似于以下内容的东西：

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

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

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

Answer 1

坏消息

所以，让我们从坏消息开始：没有办法获得你想要的本地信息。为什么？因为一旦你进入弹性＆＃39;您可以将整个webview组件向下拖动，而不仅仅是伪代码中的文档内容。

这实际上是什么意思？仿真或原生包装

仿真，选择

所以你必须运行自己的解决方案，你必须做出几个选择。首先，如果你想使用弹性滚动，你应该注意到专利US7469381 B2中的 Apple Inc。已获得专利。请仔细阅读本专利，以确保您不会侵权（即使您正在构建仅限iOS的应用程序，这不会改变任何内容）。

其次问题是你是否真的想要模仿本土体验。因为1）相信它不够完美而且2）操作系统和浏览器改变你的代码将保持过时，因此看起来很糟糕/怪异或可能甚至可以导致完全出乎意料的行为/组合。

其次你必须决定你是否希望在Android上有相同的弹性行为，或者你是否希望在android上提供更像原生的体验。就我个人而言，我相信这会产生一些优秀的用户体验，所以我不会因为使用弹性效果而使你明显失望，但是你应该仔细考虑它。

仿真，脚本

大多数脚本提供与您想要的类似的模拟＆＃34;拉动刷新＆＃34;脚本。根据您的具体要求，您应该只使用其中一个脚本并更改它们或使用一些CSS来隐藏其中的消息。

• Hook.js - 不完美模仿原生体验并使用旧的iOS背景，但是一个相当不错的选择，隐藏微调器只是使用

  .hook-spinner{
       display:none;
  }
  

• iScroll.js - 代码非常完善，表现出色。缺点是它提供的东西比你正在寻找的东西要多得多，这可能是好事还是坏事。你可以找到一个拉动刷新行为here的示例实现，但请注意它的旧版iScroll，在最后一个版本中，该示例似乎没有实现，但它应该是相当的类似。只需查看代码，了解如何删除pull to refresh消息。

• jQuery scrollz - 还有一个选项。似乎与hook.js相当，但也有一些类似iScroll的功能。你可以删除＆＃39;通过使用空HTML字符串指定pullHeaderHTML来显示消息。

原生包装

替代方案，我相信你不想做，但我确实想为了完整性而添加，是将你的应用程序分发为本机应用程序，例如捆绑在phonegap中。然而，为了实现这一点，需要对手机密码本身进行相当多的更改，这不是一个明智的方法（我曾经使用本机组件和交互开发了一个手机应用程序，并且它会触发各种javascript事件虽然可行且具有某些优点，但我并不建议这样做。

Answer 2

所以..我不知道你需要这个。

如果是ListView，您可以覆盖onOverScrolled

如果ScrollView需要这个 - 有一种方法也可以扩展它。我现在不记得了，但如果你需要它 - 我可以找到它。

如果它是你的应用程序内的WebView - 我很确定它是不可能的。您在网页呈现和操作方式上的控制量是有限的。

如果您希望Chrome / stock浏览器按照它在iOS上的方式运行 - 除非您获得浏览器的代码并自行更改，否则我认为不可能：）