android - Chrome移动忽略溢出

Question

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

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

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

#mobileViewport {
    overflow: hidden;
}

（body 标签的 id 为mobileViewport

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

这是一个错误吗？有什么解决方法吗？

score 1 · Accepted Answer

默认情况下，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 元素。

1 回答 1