因此，我正在为一个允许人们在视图之间水平滑动的 Web 应用程序构建框架。我正在寻找类似于 ubersocial 的布局，这是一个适用于 android 的应用程序。在过去的几天里，我尝试了一些不同的框架（包括自定义框架的开始，由于溢出差而无法工作：移动设备上的自动支持）。JqMobi 似乎离我最近。
这是一些代码：
<script>
//jqMobi & jqUI scripts omitted for brevity
var carousel;
var scroller;
function init_carousel ()
{
carousel = $("#carousel").carousel({
preventDefaults: false
});
scroller = $('newContainer').scroller();
}
window.addEventListener("load", init_carousel, false);
</script>
<div id="jQUi">
<div id="header"></div>
<div id="content">
<!--scrolling="no" because I don't want the whole carousel to move-->
<div title="Main" id="main" class="panel" data-tab="navbar_home" scrolling="no">
<div id="carousel" style="height:100%;width:100%;">
<div id="View1" class="MainView" style="background: yellow;">
<div id="newContainer" style="width: 100%;height: 100%; overflow: auto;>
<!--Lots of Content-->
</div>
</div>
<div id="View2" class="MainView" style="background: green;"></div>
<div id="View3" class="MainView" style="background: blue;"></div>
<div id="View4" class="MainView" style="background: pink;"></div>
<div id="View5" class="MainView" style="background: orange;"></div>
</div>
</div>
</div>
</div>
所以我已经让我的轮播适用于所有设备，并且我能够在 iOS 5 中获得完美的功能。但是，Android（2.2、2.3 和 4.0）没有为我的 .MainView 元素提供可滚动的 div，也没有更旧的iOS 设备。我能得到的最好的结果是面板上的轮播可以滚动，但面板中的元素不会一起滚动。这让我想知道我所取得的 iOS 5 的成功是否只是对溢出：自动的支持。
无论如何，我查看了以下文档：
- jqMobi CheatSheet = (http://www.appmobi.com/amdocs/lib/jqMobi_Cheat.pdf?r=9170)
- jqMobi 厨房水槽 = (http://jqmobi.com/testdrive/#webslider)
- jqMobi API 文档 = (http://api.jqmobi.com/#jqUi)
但我很难真正得到我正在寻找的答案。使用记录在案的方法，我似乎无法真正到达任何地方。似乎如果我可以在不破坏轮播的情况下将独立可滚动的 div 放入 .MainView 元素中，我会很高兴。建议？
/ * ** * ** * ** * ** * ****固定* ** * ** * ** * ** * **** /
在纠结和沮丧之后，我最终通过向 .MainDiv 元素添加第二个缓冲区来让它工作，这样滚动条就不会影响轮播。
我在 iOS 5 上也遇到了不好的磨合（你可能还记得，它以前工作过），这可能可以通过简单地添加 overflow:auto 到 .MainView 元素并给它们一个固定的高度来解决。我尝试先禁用 nativeTouchScroll，滚动实际上非常好，所以我会坚持使用它而不是添加浏览器检测条件。
<script>
//Native touch disabled or iOS 5 breaks.
$.feat.nativeTouchScroll = false;
var carousel;
//var scroller;
function init_carousel ()
{
carousel = $("#carousel").carousel({
preventDefaults: false
});
}
$.ui.ready(init_carousel);
var scroller;
$.ui.ready(function ()
{
//Fetch the scroller from cache
scroller = $("#containerContainer").scroller();
});
</script>
<style>
.MainView
{
height: 100%;
overflow: hidden;
}
</style>
<div id="carousel" style="height:100%;width:100%;">
<div id="View1" class="MainView" style="background: yellow;">
<div id="containerContainer"><div id="newContainer"></div></div>
</div>
<div id="View2" class="MainView" style="background: green;"></div>
<div id="View3" class="MainView" style="background: blue;"></div>
<div id="View4" class="MainView" style="background: pink;"></div>
<div id="View5" class="MainView" style="background: orange;"></div>
</div>