Question

我正在为Android创建一个webapp。我一直在使用JQM的phonegap，但我遇到了问题。

我正在实施一个滑入式菜单，为此我在互联网上找到了一个简单的例子。

这个简单的菜单从左边滑入，那部分效果很好，但是当我尝试滑动它时，我遇到了问题。整个页面滚动，这是尽管我有

#mobileViewport {
    overflow: hidden;
}

（正文标记的ID为mobileViewport

我也试过将它添加到html标签中，但无济于事。

这是一个错误吗？有没有解决办法？

Answer 1

默认情况下，JQM页面位于其包含元素流之外的绝对（如果包含元素静态定位）。

在包含元素（正文）上添加overflow:hidden因此无济于事。

如果您将position:relative应用于#mobileViewport，这会导致JQM移动页面现在从包含元素正确流动，并且overflow:hidden应该有效。

但是，我怀疑这可能不是一个好主意，并且必然导致其他CSS显示问题。（我记得有一次自己玩这个并且有其他问题作为副作用）

可能更好的想法是将溢出：隐藏到JQM页面元素本身。

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

#mypage {
   overflow:hidden;
}

注意：如果您有页脚，则可能需要将overflow:hidden应用于子.ui-content元素。