javascript 溢出-y：内部滚动 div 的隐藏 IOS 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17308027/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
overflow-y:hidden IOS issue with inner scrolling div
提问by Scoota P
I am building a responsive site that has overlays slide out from the side. The issue is on mobile these overlays need to be able to scroll but i dont want the page behind to scroll. On desktop setting overflow:hidden works to stop the page from scrolling but still allow the slide out div to scroll. However, in IOS this property is not working. The base page is still scrollable. I have created a jsbin below. Can someone tell me how to get the black div to scroll on IOS but prevent the base page from scrolling? It works fine on desktop but not on mobile.
我正在构建一个响应式站点，该站点的覆盖层从侧面滑出。问题是在移动设备上，这些叠加层需要能够滚动，但我不希望后面的页面滚动。在桌面设置 overflow:hidden 可以阻止页面滚动，但仍然允许滑出 div 滚动。但是，在 IOS 中，此属性不起作用。基页仍然是可滚动的。我在下面创建了一个 jsbin。有人能告诉我如何让黑色 div 在 IOS 上滚动但阻止基本页面滚动吗？它在桌面上运行良好，但在移动设备上运行不正常。
Thanks
谢谢
回答by Tim Wasson
You have to add this to your CSS:
您必须将此添加到您的 CSS：
html { height:100%; overflow:hidden; }
body { height:100%; overflow:hidden; }
That works for me. See here: http://jsbin.com/isayuy/10/
这对我行得通。见这里：http: //jsbin.com/isayuy/10/
回答by David Taiaroa
The solution from @Tim Wassonworks for me.
@Tim Wasson的解决方案对我有用。
As another option, I'm wondering if there's a reason why you don't apply position:fixed to the body tag when the slide-outs are visible?
作为另一种选择，我想知道您是否有理由不将 position:fixed 应用于当滑出可见时的 body 标签？
Appologies if I'm missing something obvious.
如果我遗漏了一些明显的东西，请道歉。
Good luck!
祝你好运！
回答by sam
Here's what I'm doing - this solution prevents the background from scrolling, while retaining the initial position (i.e. it doesn't jump to the top).
这就是我正在做的 - 此解决方案可防止背景滚动，同时保留初始位置（即它不会跳到顶部）。
preventScroll : function(prevent) {
var body = $('body'), html = $('html'), scroll;
if (prevent) {
var width = body.css('width');
scroll = window.pageYOffset;
// This is all you need to do to prevent scroll on everything except iOS.
html.css({ 'overflow': 'hidden'});
// For iOS, change it to fixed positioning and make it in the same place as
// it was scrolled.
// For all systems, change max-width to width; this prevents the page getting
// wider when the scrollbar disappears.
body.css({ 'position': 'fixed', 'top': -scroll, 'max-width' : width});
} else {
scroll = -parseInt(body.css('top'));
html.css({ 'overflow': '' });
body.css({ 'position': '', 'top': '', 'max-width': '' });
window.scrollTo(0, scroll);
}
},
This will cause problems if you resize (rotate phone) while scroll is prevented; I also have a resize event which calls preventScroll(false) and then preventScroll(true) to update the position in that case.
如果在阻止滚动时调整大小（旋转手机），这将导致问题；我还有一个调整大小事件，它调用 preventScroll(false) 然后 preventScroll(true) 在这种情况下更新位置。
回答by senthil kumar
yes. it's working.and added the following code also
是的。它正在工作。还添加了以下代码
if (window.location == window.parent.location &&
navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
$('#orderpop').attr('style',
'-webkit-overflow-scrolling: touch !important; overflow-y: scroll !important;');
}
preventScroll : function(prevent) {
var body = $('body'), html = $('html'), scroll;
if (prevent) {
var width = body.css('width');
scroll = window.pageYOffset;
// This is all you need to do to prevent scroll on everything except iOS.
html.css({ 'overflow': 'hidden'});
// For iOS, change it to fixed positioning and make it in the same place as
// it was scrolled.
// For all systems, change max-width to width; this prevents the page getting
// wider when the scrollbar disappears.
body.css({ 'position': 'fixed', 'top': -scroll, 'max-width' : width});
} else {
scroll = -parseInt(body.css('top'));
html.css({ 'overflow': '' });
body.css({ 'position': '', 'top': '', 'max-width': '' });
window.scrollTo(0, scroll);
}
}
