在手机上，检测用户何时滚动“过去”屏幕顶部

Posted 2023-05-06

【中文标题】在手机上，检测用户何时滚动“过去”屏幕顶部

【英文标题】：On mobile phone, detect when user scrolls "past" top of screen

【发布时间】：2014-07-16 16:10:31

【问题描述】：

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

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

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

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

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

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

很遗憾，这不适用于 android 手机，因为它们没有 iPhone 那样的弹性行为：

【参考方案1】：

坏消息

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

这实际上意味着什么？模拟或原生包装

仿真，选择

因此，您必须运行自己的解决方案，并且必须做出几个选择。首先，如果您希望使用弹性滚动，请注意这是 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 来“删除”消息。

原生包装

另一种方法，我相信你不想这样做，但为了完整起见我想添加，是将你的应用程序作为本机应用程序分发，例如捆绑在 phonegap 中。但是，要使这项工作正常进行，需要对 phonegap 代码本身进行大量更改，这不是一种可取的方法（我曾经开发过一个 phonegap 应用程序，使用本机组件和“围绕”它的交互来触发各种 javascript 事件，尽管可行并呈现某些优点，我不建议这样做）。

【参考方案2】：

所以..我不确定你需要这个做什么。

如果是 ListView - 你可以覆盖 onOverScrolled

如果您需要为 ScrollView 使用它 - 还有一种方法可以扩展它。我现在不记得了，但如果你需要的话-我可以找到。

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

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