Question

我的iPhone应用程序中嵌入了一个UIWebView，我希望始终在页面上保持一个锁定的页眉和页脚DIV，并带有可滚动的中心DIV。

我知道我可以使用UIView控件的页眉/页脚来做到这一点，但我希望页眉和页脚是HTML div，因为纯HTML / JS / CSS解决方案将更容易移植到Android / PalmPre / AdobeAir，它将很快出现在我的待办事项清单上。

我可以使用这里提到的技术来做到这一点：

http://defunc.com/blog/?p=94

但这要求用户使用2个手指滚动div，这对我来说并不令人满意......

有关如何执行此操作的任何建议吗？

谢谢，

布拉德

Answer 1

我发现有人为此实现了可重用的解决方案，包括页眉和页脚：

http://cubiq.org/iscroll-4

Answer 2

我对UIWebView不太熟悉，所以这可能是一个完全愚蠢的建议。但有什么阻止你在页面上有三个UIWebViews？一个用于标题，一个用于正文，一个用于页脚。因为打破它听起来像是正确的想法。

Answer 3

这是你要找的吗？ Open this link on your iPhone device or simulator

index.html文件在正文下方有“header”，“container”和“footer”三个div元素，而所有工作都在fixed.js文件中完成。通过取消“touchmove”事件的正常操作来修复文档：

    // Disable flick events
    disableScrollOnBody : function() {
        document.body.addEventListener("touchmove", function(e) {
            e.preventDefault();
        }, false);
    },

然后，很多工作都是为“touchstart”，“touchmove”和“touchend”事件创建事件监听器，这些事件附加到“容器”下的“content”div。逻辑归结为简单地上下移动“内容”div。

此解决方案是100％HTML / CSS / JavaScript，但是有一些WebKit专有的CSS和JavaScript可能会限制可移植性。在另一个移动设备上工作可能需要一些调整，但这将是一个很好的概念证明。

我没有创建这个令人敬畏的示例项目，我只是将其引入社区的注意力。有关压缩项目的更多信息和链接，请阅读Fixed positioning in Mobile Safari上的Richard“Doctyper”Herrara的全部帖子。

Answer 4

可能很笨重，但是当用户滚动时，您可以在页面顶部重新定位页眉和页脚。这样你的主div就不需要滚动了。对于任何（仍然）使用帧的任何帮助都没有帮助。

这是iPhone / touch更令人恼火的浏览器问题之一，我希望您可以像普通浏览器一样专注于部分页面。

Answer 5

对于仅CSS引用，Safari CSS Reference可能具有您要查找的内容。您将对以“-webkit”或“-khtml”开头的任何内容特别感兴趣，因为这些扩展属性仅适用于WebKit（如3D和触摸）。也应该适用于Android。

使用JavaScript，Introduction to WebKit DOM Programming Topics和WebKit DOM API Reference是首选指南。明确地看一下the light-table demo的一些复制并粘贴javascript来处理你的触摸，因为我将如何解决这个问题。

Answer 6

我已经在iphone上实现了iScroll，它非常流畅和快速，你可以做任何你想做的事情。缺点是android（1.6）拒绝滚动我想要的内容，有时会阻止其他javascript。

Answer 7

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<div style="overflow: scroll">

将这些添加到您的html代码可能会解决您的问题。

iPhone上的可滚动div不使用2个手指？

7 个答案: