菜單打開時，移動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.