CSS 溢出：隐藏应用于 <body> 在 iPhone Safari 上工作吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3047337/
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
Does overflow:hidden applied to <body> work on iPhone Safari?
提问by Francesco
Does overflow:hiddenapplied to <body>work on iPhone Safari? It seems not.
I can't create a wrapper on the whole website to achieve that...
是否overflow:hidden适用于<body>在 iPhone Safari上工作？似乎没有。我无法在整个网站上创建包装器来实现...
Do you know the solution?
你知道解决办法吗？
Example: I have a long page, and simply I want to hide the content that goes underneath the "fold", and it should work on iPhone/iPad.
示例：我有一个很长的页面，我只想隐藏“折叠”下方的内容，它应该可以在 iPhone/iPad 上运行。
回答by Alex Haas
I had a similar issue and found that applying overflow: hidden;to both htmland bodysolved my problem.
我有一个类似的问题，发现overflow: hidden;两者都适用html并body解决了我的问题。
html,
body {
overflow: hidden;
}
For iOS 9, you may need to use this instead: (Thanks chaenu!)
对于 iOS 9，您可能需要使用它来代替：（感谢 chaenu！）
html,
body {
overflow: hidden;
position: relative;
height: 100%;
}
回答by laFunk
body {
position:relative; // that's it
overflow:hidden;
}
回答by Davey
Some solutions listed here had some strange glitches when stretching the elastic scrolling. To fix that I used:
此处列出的一些解决方案在拉伸弹性滚动时会出现一些奇怪的故障。要修复我使用的：
body.lock-position {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
Source: http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/
来源：http: //www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/
回答by chaenu
Had this issue today on iOS 8 & 9 and it seems that we now need to add height: 100%;
今天在 iOS 8 & 9 上有这个问题，看来我们现在需要添加 height: 100%;
So add
所以添加
html,
body {
position: relative;
height: 100%;
overflow: hidden;
}
回答by Devraj Gadhavi
Combining the answers and comments here and this similar question hereworked for me.
结合这里的答案和评论以及这里的类似问题对我有用。
So posting as a whole answer.
所以发布作为一个完整的答案。
Here's how you need to put a wrapper div around your site content, just inside the <body>tag.
以下是您需要如何在您的网站内容周围放置一个包装 div，就在<body>标记内。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- other meta and head stuff here -->
<head>
<body>
<div class="wrapper">
<!-- Your site content here -->
</div>
</body>
</html>
Create the wrapper class as below.
创建包装类，如下所示。
.wrapper{
position:relative; //that's it
overflow:hidden;
}
I also got the idea from this answer here.
我也从这里的答案中得到了这个想法。
And this answer herealso has got some food for thought. Something that probably will work equally good in both desktops and devices.
而这里的这个答案也有一些值得深思的地方。可能在台式机和设备中同样有效的东西。
回答by Sridhar
Its working in Safari browser.
它在 Safari 浏览器中工作。
html,
body {
overflow: hidden;
position: fixed
}
回答by Loosie94
For me this:
对我来说：
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
Wasn't enough, i't didn't work on iOS on Safari. I also had to add:
还不够，我没有在 Safari 上的 iOS 上工作。我还必须补充：
top: 0;
left: 0;
right: 0;
bottom: 0;
To make it work good. Works fine now :)
为了让它工作得很好。现在工作正常:)
回答by Tobias Gerlach
I've worked with <body>and <div class="wrapper">
我曾与<body>和<div class="wrapper">
When popup opens ...
当弹出窗口打开...
<body>gets a height of 100% and an overflow:hidden
<body>获得 100% 的高度和溢出：隐藏
<div class="wrapper">gets position:relative;overflow:hidden;height:100%;
<div class="wrapper">获取位置：相对；溢出：隐藏；高度：100%；
I use JS/jQuery to get the actual scrollposition of the page and store the value as data-attribut to body
我使用 JS/jQuery 获取页面的实际滚动位置并将值存储为数据属性到正文
Then i scroll to the scrollposition in the .wrapper DIV(not in window)
然后我滚动到.wrapper DIV 中的滚动位置（不在窗口中）
Here is my solution:
这是我的解决方案：
JS/jQuery:
JS/jQuery：
// when popup opens
$('body').attr( 'data-pos', $(window).scrollTop()); // get actual scrollpos
$('body').addClass('locked'); // add class to body
$('.wrapper').scrollTop( $('body').attr( 'data-pos' ) ); // let wrapper scroll to scrollpos
// when popup close
$("body").removeClass('locked');
$( window ).scrollTop( $('body').attr( 'data-pos' ));
CSS:
CSS：
body.locked {position:relative;overflow:hidden;height:100%;}
body.locked .wrapper {position:relative;overflow:hidden;height:100%;}
It works well on both sides ... desktop & mobile (iOS).
它适用于双方......桌面和移动（iOS）。
Tipps and improvements are welcome :)
欢迎提示和改进:)
Cheers!
干杯!
回答by Longwinter
html {
position:relative;
top:0px;
left:0px;
overflow:auto;
height:auto
}
add this as default to your css
将此作为默认值添加到您的 css
.class-on-html{
position:fixed;
top:0px;
left:0px;
overflow:hidden;
height:100%;
}
toggleClass this class to to cut page
toggleClass 这个类来剪切页面
when you turn off this class first line will call scrolling bar back
当你关闭这个类时，第一行会调用滚动条回来
回答by Arie S.
Here is what I did: I check the body y position , then make the body fixed and adjust the top to the negative of that position. On reverse, I make the body static and set the scroll to the value I recorded before.
这是我所做的：我检查身体 y 位置，然后固定身体并将顶部调整到该位置的负值。相反，我使身体静止并将滚动设置为我之前记录的值。
var body_x_position = 0;
function disable_bk_scrl(){
var elb = document.querySelector('body');
body_x_position = elb.scrollTop;
// get scroll position in px
var body_x_position_m = body_x_position*(-1);
console.log(body_x_position);
document.body.style.position = "fixed";
$('body').css({ top: body_x_position_m });
}
function enable_bk_scrl(){
document.body.style.position = "static";
document.body.scrollTo(0, body_x_position);
console.log(body_x_position);
}
