blocks|key|1222803|text|经过多天的尝试，我找到了一个对我有效的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1222804|touch-action:+none;
-ms-touch-action:+none;|code-block|syntax|javascript|1222805|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

After many days trying, I found this solution that worked for me:
<pre><code>touch-action: none;
-ms-touch-action: none;
</code></pre>

blocks|key|1007993|text|body+{
++position:relative;+//+that's+it
++overflow:hidden;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1007994|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>body {
 position:relative; // that's it
 overflow:hidden;
}
</code></pre>

blocks|key|1222553|text|这里列出的一些解决方案在拉伸弹性滚动时出现了一些奇怪的小故障。要解决这个问题，我使用了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1222554|body.lock-position+{
++height:+100%25;
++overflow:+hidden;
++width:+100%25;
++position:+fixed;
}|code-block|syntax|javascript|1222555|来源：http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/|offset|length|1222556|entityMap|0|LINK|mutability|MUTABLE|url|http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/^0|0|0|3|1T|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Some solutions listed here had some strange glitches when stretching the elastic scrolling. To fix that I used: 

<pre><code>body.lock-position {
 height: 100%;
 overflow: hidden;
 width: 100%;
 position: fixed;
}
</code></pre>

Source: <a href="http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/" rel="noreferrer">http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/</a>

blocks|key|1008101|text|今天在iOS+8和9上有这个问题，看起来我们现在需要添加高度:+100%25；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1008102|所以添加|1008103|html,
body+{
++position:+relative;
++height:+100%25;
++overflow:+hidden;
}|code-block|syntax|javascript|1008104|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Had this issue today on iOS 8 &amp; 9 and it seems that we now need to add height: 100%;

So add

<pre><code>html,
body {
 position: relative;
 height: 100%;
 overflow: hidden;
}
</code></pre>

blocks|key|1222481|text|结合这里的答案和评论，this+similar+question+here对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1222482|因此，作为一个完整的答案发布。|1222483|下面介绍了如何在站点内容周围放置一个包装器div，就在<body>标记内。|style|CODE|1222484|+<!DOCTYPE+HTML>
+<html>
+<head>
+++++<meta+http-equiv="Content-Type"+content="text/html;+charset=utf-8"+/>
+++++
+<head>
+<body>
+++++<div+class="wrapper">
+++++++++
+++++</div>
+</body>
+</html>|code-block|syntax|javascript|1222485|创建包装类，如下所示。|1222486|.wrapper{
++++position:relative;+//that's+it
++++overflow:hidden;
}|1222487|我也是从this+answer+here那里得到这个想法的。|1222488|this+answer+here也有一些值得深思的东西。可能在台式机和设备上都同样好用的东西。|1222489|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/q/14270084/1184435|1|https://stackoverflow.com/a/14271049/1184435|2|https://stackoverflow.com/a/24727026/1184435^0|B|Q|0|0|0|R|6|0|0|0|0|4|G|1|0|0|G|2|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|D|3|E|5|6|7|1C|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1D|8|@$A|1E|B|1F|H|I]]|9|@]|C|$]]|$1|J|3|K|5|L|7|1G|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|1H|8|@]|9|@]|C|$]]|$1|Q|3|R|5|L|7|1I|8|@]|9|@]|C|$M|N]]|$1|S|3|T|5|6|7|1J|8|@]|9|@$A|1K|B|1L|1|1M]]|C|$]]|$1|U|3|V|5|6|7|1N|8|@]|9|@$A|1O|B|1P|1|1Q]]|C|$]]|$1|W|3|-4|5|6|7|1R|8|@]|9|@]|C|$]]]|X|$Y|$5|Z|10|11|C|$12|13]]|14|$5|Z|10|11|C|$12|15]]|16|$5|Z|10|11|C|$12|17]]]]

Combining the answers and comments here and <a href="https://stackoverflow.com/q/14270084/1184435">this similar question here</a> worked 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 <code>&lt;body&gt;</code> tag.

<pre><code> &lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 &lt;!-- other meta and head stuff here --&gt;
 &lt;head&gt;
 &lt;body&gt;
 &lt;div class="wrapper"&gt;
 &lt;!-- Your site content here --&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;
</code></pre>

Create the wrapper class as below.

<pre><code>.wrapper{
 position:relative; //that's it
 overflow:hidden;
}
</code></pre>

I also got the idea from <a href="https://stackoverflow.com/a/14271049/1184435">this answer here</a>.

And <a href="https://stackoverflow.com/a/24727026/1184435">this answer here</a> also has got some food for thought. Something that probably will work equally good in both desktops and devices.

blocks|key|1222587|text|它可以在Safari浏览器中工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1222588|html,
body+{
++overflow:+hidden;
++position:+fixed
}|code-block|syntax|javascript|1222589|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Its working in Safari browser.

<pre><code>html,
body {
 overflow: hidden;
 position: fixed
}
</code></pre>

blocks|key|1222643|text|对我来说是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1222644|height:+100%25;+
overflow:+hidden;+
width:+100%25;+
position:+fixed;|code-block|syntax|javascript|1222645|这还不够，我没有在Safari上的iOS上工作。我还必须补充一点：|1222646|top:+0;
left:+0;
right:+0;
bottom:+0;|1222647|让它更好地工作。现在可以正常工作了:)|1222648|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

For me this:

<pre><code>height: 100%; 
overflow: hidden; 
width: 100%; 
position: fixed;
</code></pre>

Wasn't enough, i't didn't work on iOS on Safari. I also had to add:

<pre><code>top: 0;
left: 0;
right: 0;
bottom: 0;
</code></pre>

To make it work good. Works fine now :)

blocks|key|1008150|text|html+{
++position:relative;
++top:0px;
++left:0px;
++overflow:auto;
++height:auto
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1008151|将此作为默认添加到您的css|unstyled|1008152|.class-on-html{
++position:fixed;
++top:0px;
++left:0px;
++overflow:hidden;
++height:100%25;
}|1008153|将这个类toggleClass到剪切页面|1008154|当您关闭这个类时，第一行将回调滚动条|1008155|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|F|7|T|8|@]|9|@]|A|$]]]|N|$]]

<pre><code>html {
 position:relative;
 top:0px;
 left:0px;
 overflow:auto;
 height:auto
}
</code></pre>

add this as default to your css

<pre><code>.class-on-html{
 position:fixed;
 top:0px;
 left:0px;
 overflow:hidden;
 height:100%;
}
</code></pre>

toggleClass this class to to cut page

when you turn off this class first line will call scrolling bar back

blocks|key|1222214|text|为什么不用类将不想显示的内容包装在一个元素中，并在一个仅适用于iphone和其他手持设备的样式表中将该类设置为display:none？|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1222215|
<link+media="only+screen+and+(max-device-width:+480px)"+href="small-device.css"+type=+"text/css"+rel="stylesheet">
|code-block|syntax|javascript|1222216|entityMap^0|1J|C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Why not wrap the content you don't want shown in an element with a class and set that class to <code>display:none</code> in a stylesheet meant only for the iphone and other handheld devices?

<pre><code>&lt;!--[if !IE]&gt;--&gt;
&lt;link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet"&gt;
&lt;!--&lt;![endif]--&gt;
</code></pre>

blocks|key|1007921|text|是的，这与safari中的新更新有关，如果你使用overflow:+hidden来处理清除div的话，这些更新正在破坏你的布局。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1007922|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Yes, this is related to new updates in safari that are breaking your layout now if you use overflow: hidden to take care of clearing divs.

blocks|key|1007974|text|它确实适用，但它只适用于DOM中的某些元素。例如，它不能在表、td或其他元素上工作，但能在标签上工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1007975|例如：|1007976|<body>
<meta+name="viewport"+content="width=device-width;+initial-scale=1.0;+maximum-scale=1.0;+user-scalable=0;"/>|code-block|syntax|javascript|1007977|仅在iOS+4.3中测试。|1007978|稍微修改一下:你最好使用overflow:scroll，这样两个手指滚动就可以工作了。|1007979|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

It does apply, but it only applies to certain elements within the DOM. for example, it won't work on a table, td, or some other elements, but it will work on a &lt;DIV&gt; tag. 
eg:

<pre><code>&lt;body&gt;
&lt;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/&gt;
</code></pre>

 
 

 


Only tested in iOS 4.3.

A minor edit: you may be better off using overflow:scroll so two finger-scrolling does work.

blocks|key|1008362|text|这是我所做的:我检查body+y的位置，然后使body固定，并将顶部调整到该位置的负数。相反，我将正文设置为静态，并将滚动设置为我之前记录的值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1008363|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);
}|code-block|syntax|javascript|1008364|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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.

<pre><code>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);
}
</code></pre>

blocks|key|1008455|text|如果您需要滚动模式|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1008456|模式开放|1008457|$('body').attr('data-position',+$(window).scrollTop());
$('body').css({'overflow'+:+'hidden',+'position'+:+'fixed'});|code-block|syntax|javascript|1008458|模式关闭|1008459|$('body').css({'overflow'+:+'unset',+'position'+:+'unset'});
$(window).scrollTop(+$('body').attr(+'data-position'+));|1008460|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

If you need scroll modal
Modal open
<pre><code>$('body').attr('data-position', $(window).scrollTop());
$('body').css({'overflow' : 'hidden', 'position' : 'fixed'});
</code></pre>
Modal close
<pre><code>$('body').css({'overflow' : 'unset', 'position' : 'unset'});
$(window).scrollTop( $('body').attr( 'data-position' ));
</code></pre>

blocks|key|1222893|text|我的版本)在iOS中工作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1222894|​|1222895|+if+(isModalWindowClose)+{
++++++++document.querySelector('body').style.overflow+=+'';
++++++++document.querySelector('html').style.overflow+=+'';
++++++++
++++++++const+scrollY+=+document.body.style.top;
++++++++
++++++++document.querySelector('html').style.height+=+'';
++++++++document.body.style.position+=+'';
++++++++document.body.style.left+=+'';
++++++++document.body.style.top+=+'';

++++++++window.scrollTo(0,+parseInt(scrollY+%7C%7C+'0')+*+-1);

++++++++document.querySelector('html').style['scroll-behavior']+=+'';
++++}+else+{
++++++++document.body.style.top+=+`-${window.scrollY}px`;
++++++++document.querySelector('html').style.height+=+`${window.innerHeight+-+1}px`;
++++++++
++++++++document.body.style.position+=+'fixed';
++++++++document.body.style.left+=+'0';
++++++++
++++++++document.querySelector('body').style.overflow+=+'hidden';
++++++++document.querySelector('html').style.overflow+=+'hidden';
++++++++
++++++++document.querySelector('html').style['scroll-behavior']+=+'unset';
++++}|code-block|syntax|javascript|1222896|1222897|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

My version) Work in iOS
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> if (isModalWindowClose) {
 document.querySelector('body').style.overflow = '';
 document.querySelector('html').style.overflow = '';
 
 const scrollY = document.body.style.top;
 
 document.querySelector('html').style.height = '';
 document.body.style.position = '';
 document.body.style.left = '';
 document.body.style.top = '';

 window.scrollTo(0, parseInt(scrollY || '0') * -1);

 document.querySelector('html').style['scroll-behavior'] = '';
 } else {
 document.body.style.top = `-${window.scrollY}px`;
 document.querySelector('html').style.height = `${window.innerHeight - 1}px`;
 
 document.body.style.position = 'fixed';
 document.body.style.left = '0';
 
 document.querySelector('body').style.overflow = 'hidden';
 document.querySelector('html').style.overflow = 'hidden';
 
 document.querySelector('html').style['scroll-behavior'] = 'unset';
 }</code></pre>
</div>
</div>

blocks|key|1008279|text|只需将机身高度更改为<+300px+(+landspace上移动视口的高度约为300px至500px)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1008280|JS|1008281|$(+'.offcanvas-toggle'+).on(+'click',+function()+{
++++$(+'body'+).toggleClass(+'offcanvas-expanded'+);
});|code-block|syntax|javascript|1008282|CSS|1008283|.offcanvas-expended+{+/*+this+is+class+added+to+body+on+click+*/
++++height:+200px;
}
.offcanvas+{
++++height:+100%25;
}|1008284|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Simply change body height &lt; 300px (height of mobile viewport on landspace is around 300px to 500px)

JS

<pre><code>$( '.offcanvas-toggle' ).on( 'click', function() {
 $( 'body' ).toggleClass( 'offcanvas-expanded' );
});
</code></pre>

CSS

<pre><code>.offcanvas-expended { /* this is class added to body on click */
 height: 200px;
}
.offcanvas {
 height: 100%;
}
</code></pre>

Does <code>overflow:hidden</code> applied to <code>&lt;body&gt;</code> work on iPhone Safari? It seems not.
I can't create a wrapper on the whole website to achieve that...

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.

Does overflow:hidden applied to <body> work on iPhone Safari?

应用于<body>的overflow:hidden可以在iPhone Safari上工作吗？看起来不是。我不能在整个网站上创建一个包装器来实现这一点...你知道解决方案吗？例如:我有一个很长的页面，我只是想隐藏“文件夹”下面的内容，它应该可以在iPhone/iPad上工作。

问overflow:hidden是否适用于iPhone Safari上的<body>？
EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问overflow:hidden是否适用于iPhone Safari上的<body>？EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问overflow:hidden是否适用于iPhone Safari上的<body>？
EN