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が移動したり見えなくなったりしてはなりません。

位置を設定しようとしました：div＃titleとdiv＃tabsに修正されましたが、BlackBerry電話でスクロールしようとすると、div＃titleとdiv＃tabsが更新されて表示されるまでに長い時間がかかるという遅れの問題があります。

position：fixedを使用できない場合、ヘッダーを修正しながら、レイアウトをオーバーラップまたはストレッチせずにコンテンツをスクロール可能にする人はいますか？

ありがとうございました。

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 に答える