固定双标头,可滚动内容(移动应用程序)

时间:2012-11-09 02:14:39

标签: css html5 blackberry-webworks

我有问题使用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,是否有人修复标题但是可以滚动内容而不重叠或拉伸布局?

谢谢。

1 个答案:

答案 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;将允许您使用惯性滚动效果。