使用javascript / jQuery我希望能够检测用户何时“滚动”到屏幕顶部.
让我试着解释一下：想象一下刚刚加载的网页,你会看到屏幕顶部的导航栏.现在,您将手指放在屏幕上并向下拖动.在iPhone上,这看起来像：
我正在寻找类似于以下内容的东西：
$(document).ready(function () {
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if(y < -20)) {
//do something
}
不幸的是,这不适用于Android手机,因为它们没有与iPhone相同的弹性行为：
解决方法
所以,让我们从坏消息开始：没有办法获得你想要的本地信息.为什么？因为一旦进入“弹性”区域,就会将整个webview组件向下拖动,而不是像伪代码那样只拖动文档内容.
这实际上是什么意思？仿真或原生包装
仿真,选择
所以你必须运行自己的解决方案,你必须做出几个选择.首先,如果你想使用弹性滚动,你应该注意到苹果公司在专利US7469381 B2中获得了专利.请仔细阅读这一专利,以确保你不会侵权(即使你正在构建一个仅限iOS的应用程序这不会改变任何事情).
其次,问题是你是否真的想要模仿本土体验.由于1)相信它不够完美而且2)因为操作系统和浏览器改变你的代码将保持过时而因此看起来很糟糕/很奇怪或甚至可能甚至可能导致完全意外的行为/组合.
其次,你必须决定你是否希望在Android上有相同的弹性行为,或者你是否希望在android上提供更像本机的体验.就我个人而言,我相信这会产生一些优秀的用户体验,所以我不会因为使用弹性效果而使你明显失望,但这是你应该仔细考虑的事情.
仿真,脚本
大多数提供类似仿真的脚本都是“拉动刷新”脚本.根据您的具体要求,您应该只使用其中一个脚本并更改它们或使用一些CSS来隐藏其中的消息.
> Hook.js – 不完美仿效原生体验并使用旧的iOS背景,但是一个相当不错的选择,隐藏微调器只是使用
.hook-spinner{
display:none;
}
> iScroll.js – 代码非常完善,表现出色.缺点是它提供的东西比你正在寻找的东西要多得多,这可能是好事还是坏事.你可以找到一个拉动刷新行为here的示例实现,但请注意它是旧版本的iScroll,在最后一个版本中,该示例似乎没有实现,但它应该非常相似.只需查看代码即可了解如何删除pull to refresh消息.
> jQuery scrollz – 还有一个选择.似乎可以与hook.js相媲美,但也有一些类似iScroll的功能.您可以通过使用空HTML字符串指定pullHeaderHTML来“删除”该消息.
原生包装
替代方案,我相信你不想做,但我确实想为了完整性而添加,是将你的应用程序分发为本机应用程序,例如捆绑在phonegap中.然而,为了实现这一目标需要对手机密码本身进行相当多的更改,并且这不是一个明智的方法(我曾经开发过一个使用本机组件和互动的电话空白应用程序’触发各种javascript事件,尽管可行和呈现某些优点,这不是我建议的东西).
