菜单打开时，移动Safari阻止正文滚动
[英]Mobile Safari prevent body scroll when menu open
问题描述
我已经和这件事战斗了好几个星期了。 我只是想不通。
我试图防止菜单打开时主体的水平滚动。 这是完整的jsbin：
http://jsbin.com/vopeq/38/edit
似乎任何解决方案都只能撤消按我希望它们起作用的其他方式。 因此，我在jsbin中添加了要求，以跟踪每个版本都满足哪些要求。
UPDATE
也许这太真实了，但是我想我满足了所有要求，但是我仍然需要在android设备上进行检查：
我学到的东西使我绊倒了很长时间，但我没有意识到，它就是overflow: hidden在Mobile Safari中的<body>元素上不会蹲下！ 我不得不移动样式以防止向下滚动一级元素。
Ed4为我指明了正确的方向。 我需要设置overflow: hidden在我要left: 85%移动的元素的父元素上left: 85%而不是元素本身（我试图在<body>上完成所有操作）。
所以我有一个body > .container ，在上面进行overflow: hidden和body > .container > .content ，我使用position: relative和left: 85%了推送。
1 个解决方案
解决方案1
1 已采纳 2014-08-27 16:57:54
您的问题更多的是设计规范，而不是问题，因此，我要指出为什么您的jsbin无法正常工作，而不是尝试为您设计整个布局。
不要尝试设置left的body 。 如果body伸出屏幕外，您将无法可靠地停止滚动。
相反，应使body保持100％的宽度和高度静止，以便将其用作可见的窗口边界。 当您想锁定滚动时，可以设置overflow: hidden在body 。 在主体内部使用单独的div处理滑行和滚动菜单。
当移动菜单打开时，我设法禁用了身体滚动，但是当我打开移动菜单时，桌面/正文页面总是回到顶部
[英]I manage to disable scroll on body when menu mobile is open , but desktop / body page always going back to the top when i open menu mobile
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.