我正在开发一个专为iPhone优化的Web应用。
在其中一个页面上,我将有一张包含几百行和数十列的表格。
我希望使第一列固定不动(保持可见),当用户向右滚动时,标题行也能够固定不动(就像Excel中的"冻结窗格"功能)。
有另一篇帖子解决了这个确切的问题:
HTML table with fixed headers and a fixed column?
...提供了一个绝佳的解决方案:
http://fixed-header-using-jquery.blogspot.com/2009/05/scrollable-table-with-fixed-header-and.html
...以及一个演示:http://acatalept.com/common/test/fixed-table.html
然而,在iPhone上似乎无法正常工作 - 整个页面都会被滚动。
我该如何修改这个例子,以便在iPhone上运行?
(幸运的是,解决方案只需要在iPhone上运行,因此我可以利用任何特定的Webkit功能,并忽略其他浏览器的问题。当然,跨浏览器兼容解决方案更好...)
[更新]
好吧,我意识到我问错了问题。
我认为问题在于iPhone的Webkit没有提供在一个固定大小(宽度/高度)的div中滚动内容的本机方式。因此,基本上无法同时拥有固定的页眉/页脚和可滚动的中央区域。
(Galambalazs下面的答案是一个很好的答案,在我测试的任何桌面浏览器中都可以正常工作,但在iPhone上无法正常工作,因为它滚动的是整个页面而不是表格主体部分)。
然后,我发现了Mateo Spinelli的iScroll(http://cubiq.org/iscroll)。我还没有完成我正在寻找的完整解决方案的实现,但他的脚本似乎能够处理我遇到的确切问题。
我还不能对他的代码的效果发表评论,但他的演示非常出色,所以我猜想iScroll将是一个很好的解决方案。