寻找iScroll的替代方案(在iOS/Webkit上滚动Div)

Question

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

这对移动世界来说不是一个正确的方法,因为移动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.