[英]overflow-y:hidden IOS issue with inner scrolling div
我正在建立一个响应式网站,从侧面滑出覆盖。 问题是在移动设备上这些叠加需要能够滚动,但我不希望页面后面滚动。 在桌面设置溢出:隐藏工作,以阻止页面滚动但仍允许滑出div滚动。 但是,在IOS中,此属性不起作用。 基页仍可滚动。 我在下面创建了一个jsbin。 有人能告诉我如何让黑色div在IOS上滚动,但阻止基页滚动? 它在桌面上运行良好,但在移动设备上运行良
谢谢
你必须将它添加到你的CSS:
html { height:100%; overflow:hidden; }
body { height:100%; overflow:hidden; }
这对我行得通。 见这里: http : //jsbin.com/isayuy/10/
这就是我正在做的事情 - 这个解决方案可以防止背景滚动,同时保留初始位置(即它不会跳到顶部)。
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);
}
},
如果在防止滚动时调整大小(旋转手机),这将导致问题; 我还有一个调用preventScroll(false)的resize事件,然后在这种情况下使用preventScroll(true)来更新位置。
是。 它正在工作。还添加了以下代码
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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.