1

Android用のWebアプリを作成して遊んでいます。JQMでphonegapを使っていたのですが、問題が発生しました。

私はスライドイン メニューを実装しています。そのために、インターネットで簡単な例を見つけました。

http://www.aldomatic.com/jqm/fb-menu-style/

このシンプルなメニューは左からスライドインします。その部分はうまく機能しますが、スライドインしようとすると問題が発生します。ページ全体がスクロールしますが、これは私が持っているにもかかわらずです

#mobileViewport {
    overflow: hidden;
}

( body タグの id はmobileViewport

私もhtmlタグに追加しようとしましたが、役に立ちませんでした。

これはバグですか？回避策はありますか？

4

1 に答える 1

1

デフォルトでは、JQMページは、包含要素のフローの外側に絶対的に配置されます（包含要素が静的に配置されている場合）。

したがって、包含要素（本体）を追加overflow:hiddenしても効果はありません。

これに適用position:relativeする#mobileViewportと、JQMモバイルページが含まれている要素から正しく流れるようになり、動作するoverflow:hiddenはずです。

ただし、これはおそらく良い考えではなく、他のCSS表示の問題を引き起こす可能性があると思います。（私はそれを自分で一度遊んだり、副作用として他の問題を抱えていたことを思い出します）

おそらく、JQMページ要素自体にoverflow：hiddenを追加することをお勧めします。

<body class="ui-mobile-viewport">
  <div id="mypage" data-role="page" class="ui-page">
  ...
  </div>
</div>

#mypage {
   overflow:hidden;
}

注：フッターがある場合は、代わりoverflow:hiddenに子.ui-content 要素にを適用することをお勧めします。

于 2012-12-31T04:13:03.693 に答える