Question

我正在制作一个iPad网络应用程序，客户希望它有两个窗格（两个单独滚动），就像iPad设置应用程序一样。在保持与旧版iOS的兼容性的同时，最好的方法是什么？

谢谢！

编辑：我忘了提到它应该看起来有点原生，所以没有两个手指滚动。

Answer 1

这可以通过让2 <div>个元素占据每个屏幕的50％而单独控制它们的溢出来滚动来完成。

最简单的css如下所示就足够了：

#left{
    width:50%;
    height:300px;
    float:left;
    overflow-y:scroll   
}

#right{
    width:50%;
    height:300px;
    float:left;
    overflow-y:scroll    
}

我保持这些是分开的，所以你可以单独控制左侧和右侧（即，您可能希望左侧为40％，右侧为60％。或者您可能希望左侧固定和右侧滚动。）

这是一个演示此工作的jsfiddle：http://jsfiddle.net/tFJeS/1/

Answer 2

你可以使用两个容器元素（例如DIV）并使用以下样式

#first,
#second {
  float: left;
  height: 500px; // or whatever fits your needs
  width: 50%;
  overflow-y: scroll   
}

请注意，在iOS中，当在Web应用程序中使用时，需要用两根手指滚动内容，并且不可能像在本机应用程序中那样用一根手指执行此操作..另请参阅Safari Web Content Guide

为iPad制作2窗格Web应用程序的最佳方式

2 个答案: