Question

我在数据移动应用程序上构建了一个复杂的表单，现在我正在寻找一个解决方案来保持标题和页脚栏的位置。在我的桌面上使用Chrome和Safari进行开发和测试的假人中，我只是将页眉和页脚放置在绝对位置，以及内容部分，在Windows的resize事件中由JavaScript设置高度。

这不适合移动世界，因为移动WebKit不支持overflow：auto。

我自己尝试了一些东西，我还看了一下iScroll。事实上，iScroll在我的iPad上崩溃了Safari，而没有该组件的应用程序运行得相当顺利。我有很多相对复杂的形式，这可能是iScroll的挑战，我认为这是不可能的。

所以我正在寻找其他方法来实现我的目标（持久的页眉和页脚）而不让用户使用两个手指进行滚动（事实上，几乎没有人知道“技巧”）。

有什么建议吗？

谢谢！

Answer 1

所以有三种常见的解决方案：

滚动浏览简单列表非常简洁。但是，如果它的目的是处理不仅仅是列表的完整页面，例如具有动态表单的复杂对话框等，那么没有人真正有效。

我决定放弃并等待一年 - 苹果公司最近宣布支持这一职位：固定和溢出：滚动，这将彻底改变这一部分并解决我们今天遇到的所有问题。

今天我想起了我们位于慕尼黑的大楼里的一家公司网站，用iPad打开了它，事实上，它的首页上有一个可滚动的新闻栏目。所以我看了看里面，看到它正在使用...... tadaaa ... jScrollPane 。

我认为jScrollPane不是为在移动设备上使用而开发的，但它也已针对此目的进行了优化。它只适用于我的iPad，Android 2.3以及最新的Opera Mobile。

它不像在移动设备上滚动本机应用程序，但它允许您查看完全可自定义的滚动条，跳转到顶部和按钮，最重要的是，用一根手指滚动< /强>

非常好。

Answer 2

Mobile webkit现在仅支持使用CSS滚动。创建一个类'scrollable'并添加以下规则：

    .scrollable {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }

将'scrollable'类添加到需要滚动的任何块元素。仅限Webkit。

Answer 3

轻量级基于polyfill的解决方案，让现代浏览器具有溢出：滚动支持做他们的事情。

仍处于开发的早期阶段，但在受影响最大的用户群（Android 2.2 / 2.3 / iOS＆lt; 5）上运行良好。