我有问题使用WebWorks设计移动应用程序的布局。页面的布局是:
----------------Title Header (div#title)-----------------
----------------Tabs Header(div#tabs)--------------------
----------- content (div#content) ----------------
标记:
<body>
<div id="mainContainer">
<div id="title">Some title</div>
<div id="tabs">Some navigation tabs</div>
<div id="content>
<!--- some contents that could be in contain in div or table populated from
database-->
</div>
</div>
div#title和div#tabs是固定标题。 div #content是可垂直滚动的,不会重叠div#title和div#tabs,也可以水平滚动div #title和div#tabs在水平滚动时不能移动或消失。
我尝试过设置positon:固定到div#title和div#tabs但是当尝试滚动黑莓手机时,有一些滞后的问题,div#title和div#tabs需要很长时间才能刷新并显示自己。
如果无法使用position:fixed,是否有人修复标题但是可以滚动内容而不重叠或拉伸布局?
谢谢。
答案 0 :(得分:0)
我总是像这样处理滚动:
body {
position: fixed;
}
#title, #tabs {
position: fixed;
}
#content {
overflow-y: scroll;
-webkit-overflow-scrolling: touch; // for bb10
}
请注意,如果您的目标是BlackBerry 10,那么-webkit-overflow-scrolling:touch;将允许您使用惯性滚动效果。