jQuery-mobile 面板启用水平滚动答案

【问题标题】：JQuery-mobile panel enables horizontal scrollingjQuery-mobile 面板启用水平滚动
【发布时间】：2013-09-09 19:11:34
【问题描述】：

在iOS上使用带有phonegap的JQuery-mobile时，我打开了一个面板，但是启用了水平滚动，给我带来了麻烦，所以我可以将整个页面与面板一起滚动到左侧。面板打开时如何禁用水平滚动？

【问题讨论】：

试试这个 CSS 修复。 .ui-panel { overflow: hidden; } 和 .ui-panel-inner { overflow-y: scroll; }。另外请确保面板的高度不大于页面的高度。
查看此演示，创建一个面板，然后根据需要添加内容。内部 div 将滚动离开页面。 jsfiddle.net/Palestinian/a2PVU
不幸的是这不起作用。我仍然可以向左滚动整个页面。
糟糕，我的错，这修复了垂直滚动。当面板打开时，ui-page 应该隐藏了 overflow-x。试试.ui-page-active.ui-page-panel { overflow-x: hidden }
非常感谢。有时真的很难知道所有的 CSS 东西。也许需要开始阅读一些好的 CSS 书籍。

【解决方案1】：

我刚刚遇到了 phonegap 和 android 的相同问题。为我解决的问题是摆脱了 data-display="overlay" 或 display="push"。即使它不再滑入，菜单仍然有效。希望这能有所帮助。

【讨论】：

【解决方案2】：

使用 jQuery Mobile 1.4.5（我遇到此问题的版本），原因是 html 元素允许水平滚动。这可以通过设置来解决

html { overflow-x: hidden; }

或

.ui-mobile { overflow-x: hidden }

【讨论】：