3

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

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

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

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

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

关于如何做到这一点的任何建议？

谢谢，

布拉德

4

7 回答 7

6

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

http://cubiq.org/iscroll-4

于 2009-03-24T17:19:18.557 回答
2

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

于 2009-03-05T16:25:59.550 回答
2

这是你要找的吗？在您的 iPhone 设备或模拟器上打开此链接。

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

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

然后，为附加到“container”下的“content”div 的“touchstart”、“touchmove”和“touchend”事件创建事件侦听器需要做很多工作。逻辑归结为简单地上下移动“内容”div。

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

我没有创建这个很棒的示例项目，我只是将它引起社区的注意。有关更多信息和压缩项目的链接，请阅读 Richard "Doctyper" Herrara 关于移动 Safari 中的固定定位的整篇文章。

于 2009-05-10T03:03:53.017 回答
1

可能很笨重，但您可以在用户滚动时将页眉和页脚重新定位到 div 的顶部。这样你的主 div 不需要是可滚动的。但是，使用框架对任何事情（仍然）没有帮助。

这是 iPhone/touch 中比较恼人的浏览器问题之一，我希望您可以像普通浏览器一样只关注页面的一部分。

于 2009-03-05T15:58:59.690 回答
0

对于仅 CSS 参考，Safari CSS 参考可能有您正在寻找的内容。您将对以“-webkit”或“-khtml”开头的任何内容特别感兴趣，因为这些是仅可用于 WebKit 的扩展属性，例如 3D 和触摸。也应该适用于Android。

对于 JavaScript ，WebKit DOM 编程主题简介和WebKit DOM API 参考是首选指南。一定要看看light-table 演示，了解一些复制和粘贴 javascript 来处理你的触摸，因为这就是我解决这个问题的方法。

于 2009-03-17T18:00:35.583 回答
0

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

于 2010-06-30T14:04:26.120 回答
0 
<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 代码中可能会解决您的问题。

于 2014-03-11T10:18:21.330 回答