在iPhone页面滚动期间隐藏和显示div

Question

需要在网页上方显示一个元素（div）。滚动时，该元素应消失，并在滚动结束后重新出现。

为增加复杂性：

1. 我们的代码是来宾代码（因此我们无法操作DOM结构等）。 2. 我们的代码旨在在iPhone/iPad（移动Safari浏览器）上运行。

我们尝试在文档/正文上侦听touchstart事件，并在我们的专用处理程序中隐藏元素（div）。然而，在某些站点上（当DOM结构变得相当复杂时），即使处理程序实现是完全空的，滚动响应时间也会显著增加。

我们正在寻找正确的方法来管理元素的（重新）出现，同时对用户滚动体验的影响最小。

- roee

Answer 1

我认为JavaScript是您最好的解决方案。您可以使用document.createElement动态插入DIV到任何内容中，然后还可以添加一些JavaScript来监听onScroll事件...

如果您愿意，甚至可以使用原生代码构建的自定义HTML填充DIV。

需要帮助吗？

- ben_the_builder

---

在我们的情况下，“onScroll”处理程序是在滚动之后调用的，但我们希望在滚动开始之前隐藏元素。 - roee

Answer 2

我不知道你是否是jQuery的用户，但这个.scroll()函数可能会帮助你实现你想要做的事情。请查看演示以了解它的工作原理。

http://api.jquery.com/scroll/

- Online Colleges Geek

Answer 3

在最近的iOS版本（5.x）中，固定定位（CSS中的position:fixed）得到了流畅的支持，因此您的元素将被定位在屏幕坐标上。这可能是解决您的问题的好起点。

- BreakPhreak

---

注意：在iOS 6上，Fixed会出现问题...“注：仅在Android 2.2+中使用以下meta标签才有效：<meta name="viewport" content="width=device-width, user-scalable=no">。在iOS Safari中的部分支持是指存在错误行为。”--http://caniuse.com/css-fixed - nym