我正在制作一个 iPad 网络应用程序,客户希望它有两个窗格(都单独滚动),就像 iPad 设置应用程序一样。在保持与旧版本 iOS 的兼容性的同时,最好的方法是什么?
谢谢!
编辑:我忘了提到它应该看起来有点原生,所以没有两个手指滚动。
我正在制作一个 iPad 网络应用程序,客户希望它有两个窗格(都单独滚动),就像 iPad 设置应用程序一样。在保持与旧版本 iOS 的兼容性的同时,最好的方法是什么?
谢谢!
编辑:我忘了提到它应该看起来有点原生,所以没有两个手指滚动。
这可以通过让 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/
您可以只使用两个容器元素(例如 DIV)并使用以下样式
#first,
#second {
float: left;
height: 500px; // or whatever fits your needs
width: 50%;
overflow-y: scroll
}
请注意,在 Web 应用程序中使用它时,iOS 溢出内容需要用两根手指滚动,而不能像在本机应用程序中那样用一根手指滚动。另请参阅Safari Web 内容指南