简体繁体 English

菜单打开时，移动Safari阻止正文滚动

[英]Mobile Safari prevent body scroll when menu open

原文 2014-08-27 05:27:43 4 1 javascript/ css/ mobile-safari

I have been fighting with this thing for several weeks now. 我已经和这件事战斗了好几个星期了。 I just can't figure it out. 我只是想不通。

I'm trying to prevent horizontal scrolling of the body when the menu is open. 我试图防止菜单打开时主体的水平滚动。 Here is a complete jsbin: 这是完整的jsbin：

http://jsbin.com/vopeq/38/edit http://jsbin.com/vopeq/38/edit

Seems like any solution only undoes other things that are working the way I would like them to. 似乎任何解决方案都只能撤消按我希望它们起作用的其他方式。 So I added the requirements to the jsbin to keep track of which are satisfied with each version. 因此，我在jsbin中添加了要求，以跟踪每个版本都满足哪些要求。

UPDATE UPDATE

Maybe it's too good to be true, but I think I have all requirements satisfied, but I still need to check on android devices: 也许这太真实了，但是我想我满足了所有要求，但是我仍然需要在android设备上进行检查：

http://jsbin.com/vopeq/61 http://jsbin.com/vopeq/61

The thing I learned, that was tripping me up for so long and I didn't realize it, is that overflow: hidden on the <body> element, in Mobile Safari, doesn't do squat! 我学到的东西使我绊倒了很长时间，但我没有意识到，它就是overflow: hidden在Mobile Safari中的<body>元素上不会蹲下！ I had to move my styles to prevent scrolling down one level of elements. 我不得不移动样式以防止向下滚动一级元素。

And Ed4 pointed me in the right direction. Ed4为我指明了正确的方向。 I needed to set overflow: hidden on the parent of the element I'm moving with left: 85% instead of the element itself (I was trying to do it all on the <body> ). 我需要设置overflow: hidden在我要left: 85%移动的元素的父元素上left: 85%而不是元素本身（我试图在<body>上完成所有操作）。

So I have a body > .container , on which I do the overflow: hidden and body > .container > .content , which I push over using position: relative and left: 85% . 所以我有一个body > .container ，在上面进行overflow: hidden和body > .container > .content ，我使用position: relative和left: 85%了推送。

1 个解决方案

Your question is more of a design spec than a question, so rather than try to design the whole layout for you, I'll point out why your jsbin doesn't work. 您的问题更多的是设计规范，而不是问题，因此，我要指出为什么您的jsbin无法正常工作，而不是尝试为您设计整个布局。

Don't try to set left on body . 不要尝试设置left的body 。 If body is protruding offscreen, you're not going to be able to reliably stop scrolling. 如果body伸出屏幕外，您将无法可靠地停止滚动。

Instead, keep body stationary with 100% width and height, so it can serve as your visible window boundary. 相反，应使body保持100％的宽度和高度静止，以便将其用作可见的窗口边界。 When you want to lock the scrolling, you can set overflow: hidden on body . 当您想锁定滚动时，可以设置overflow: hidden在body 。 Handle the slide-over and scrolling menu with separate divs inside body. 在主体内部使用单独的div处理滑行和滚动菜单。