0

我在使用 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: fixed to div#title 和 div#tabs 但是当尝试在 BlackBerry 手机中滚动时存在一些滞后问题，即 div#title 和 div#tabs 需要很长时间才能刷新和显示自身。

如果不能使用位置：固定，是否有人修复标题但使内容可滚动而不重叠或拉伸布局？

谢谢你。

4

1 回答 1

0

我总是这样处理滚动：

body { position: fixed; }

#title, #tabs { position: fixed; }

#content { overflow-y: scroll; -webkit-overflow-scrolling: touch; // for bb10 }

请注意，如果您的目标是 BlackBerry 10，-webkit-overflow-scrolling: touch; 将允许您利用惯性滚动效果。

于 2012-11-12T17:08:06.540 回答