8

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

这不是移动世界的正确方式，因为移动 WebKit 不支持 overflow:auto。

我自己尝试了一些东西，还看了 iScroll。事实上，iScroll 在我的 iPad 上崩溃了 safari，而没有该组件的应用程序运行非常流畅。我有很多相对复杂的表格，这可能是对iScroll的挑战，我认为这是无法赢得的。

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

有什么建议么？

谢谢！

4

3 回答 3

14

所以通常提到的解决方案有以下三种：

  1. iScroll
  2. YUI 滚动视图
  3. 可滚动性

它们都非常适合滚动简单列表。但是，如果它的目的是处理不仅仅是一个列表的完整页面，例如具有动态表单的复杂对话框等，那么没有人真正起作用。

我刚刚决定放弃并等待一年——Apple 最近宣布支持 position:fixed 和 overflow:scroll，这将彻底改变这部分并解决我们今天遇到的所有此类问题。

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

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

它不像在移动设备上滚动原生应用程序，但它允许您看到完全可自定义的滚动条，跳转到顶部和底部，最重要的是，用一根手指滚动。

非常好。

于 2011-07-04T17:58:57.067 回答
11

移动 webkit 现在支持仅使用 CSS 进行滚动。创建一个“可滚动”类并添加以下规则：

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

将您的“可滚动”类添加到任何需要滚动的块元素。仅限 Webkit。

于 2012-08-09T22:17:52.067 回答
1

https://github.com/filamentgroup/Overthrow/

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

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

于 2012-12-18T19:26:44.393 回答