android - 在移动 iOS 和 android 上停止 overflow-x

我有一个隐藏在主要内容后面的侧边菜单，直到按下切换按钮，此时内容向右滑动(通过 margin-left)以显示菜单。

一切正常，但在移动设备上，用户可以通过从右向左滑动/轻扫来重新定位菜单，以便滚动整个 Pane 。这是不可取的，因为它会让用户感到困惑。我已经在这个 plunkr 中展示了它:

应用于 html 和 body 的 overflow-x: hidden 似乎在 chrome dev 的移动版欺骗版本中有效，但是当我检查在实际的 Android 设备或 iOS 模拟器中，整个 Pane 仍会左右滚动。

是否有一个简单的 CSS 解决方法？如果相关，我只需要现代浏览器支持。

最佳答案

事实证明，移动浏览器似乎并没有像它们应该的那样尊重 overflow-x。所以我的解决方案是将 overflow: hidden 添加到 html 和 body 元素以完全限制滚动，然后覆盖 y-使用 overflow-y: scroll 在需要它的元素上滚动。

它就像一个魅力!

关于android - 在移动 iOS 和 android 上停止 overflow-x，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27531220/