在iPhone Safari上是否可以对<body>应用“ overflow：hidden”？

131

是否overflow:hidden可以<body>在iPhone Safari上使用？好像没有 我无法在整个网站上创建包装器来实现此目标...

您知道解决方案吗？

示例：我的页面很长，只是想隐藏“折叠”下面的内容，它应该可以在iPhone / iPad上使用。

iphone  css  ipad  safari  overflow 
— 弗朗切斯科
source
1
拼命寻找自己的答案。
— mwilcox 2010年

Answers:

115

我遇到了类似的问题，发现同时适用overflow: hidden;于两者html并body解决了我的问题。

html,
body {
    overflow: hidden;
}

对于iOS 9，您可能需要改用以下命令：（谢谢chaenu！）

html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
}
— 亚历克斯·哈斯（Alex Haas）
source
12
这不适用于iOS Safari。职位：亲戚也是必要的。
— 凯文·
5
是的，将相对和溢出都添加到html + body
— wutang 2014年
3
即使在身体和html上使用相对位置，这在iOS 9上也不起作用
— Charles John Thompson III
1
一句警告，隐藏在<html>标签上的溢出将破坏jQuery的滚动事件
— Brett Gregson
2
在iOS 9，Safari上，这不适用于我。加上后，机身仍可滚动position: relative。
— Edo
87 
body {
  position:relative; // that's it
  overflow:hidden;
}
— 拉芬克
source
3
谢谢。您。当元素从视口外部过渡到内部时，我遇到了一个大问题。在扩展内容的地方会发生一个奇怪的错误。这是我的解决方案！
— 埃里克
48
在我的情况下，添加“位置：相对”无济于事，但是添加“位置：固定”是可行的。
— LeastOne 2015年
1
是的，这有效。我正在建立一个网站，他们希望移动导航翻阅内容-但是当打开导航栏时，后台导航后的内容仍会滚动。其他与位置，溢出和高度有关的答案也起作用，但是在打开导航栏时，页面高度跳至顶部。我想这是我的情况所独有的，但是我想我要提到的是，以防其他任何重叠导航的人遇到同样的问题。
— moonunit7'9
包装器去哪儿了？这是一个完整的答案吗？
— 库格尔
8
添加固定位置确实可以解决该问题，但是它会使页面跳至顶部，如果在菜单或模式显示时在后台实现此功能，则对UX不利。为了制作出优质的UX，您应该在锁定位置之前存储页面的滚动位置，然后在解锁后重新应用它。
— mike
27

拉伸弹性滚动时，此处列出的某些解决方案有一些奇怪的故障。要解决我使用的问题：

body.lock-position {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}

资料来源：http : //www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/

— 戴维
source
4
这很好（在我的情况下比更好position: relative），但是在恢复默认样式（例如关闭菜单）后滚动位置丢失了。
— jmarceli
1
对于滚动位置，您可以使用js（在此示例中为jquery）执行以下操作： // on menu open // save window pos $('body').attr( 'data-pos', $(window).scrollTop() ) ; // ... // on menu close // scroll to saved window pos $( window ).scrollTop( $('body').attr( 'data-pos' ) );
— Davey
那真的为我打了勾！
— D.Steinel
8

今天在iOS 8和9上出现了这个问题，看来我们现在需要增加高度：100％；

所以加

html,
body {
  position: relative;
  height: 100%;
  overflow: hidden;
}
— 查努
source
4

将这里的答案和评论以及这里的类似问题结合起来，对我来说很有效。

因此，发布整体答案。

这是您需要在<body>标记内的网站内容周围放置一个包装div的方法。

 <!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>

创建如下的包装器类。

.wrapper{
    position:relative; //that's it
    overflow:hidden;
}

我也从这里得到这个答案的主意。

而且这里的答案也引起了一些思考。在台式机和设备上可能同样有效的东西。

— 德夫拉吉·加达维（Devraj Gadhavi）
source
这是我的解决方案。
— Roel Magdaleno
1
当模式关闭时，这会导致页面滚动到顶部。
— 杰森
4

它可以在Safari浏览器中使用。

html,
body {
  overflow: hidden;
  position: fixed
}
— 斯里达
source
4

对我来说：

height: 100%; 
overflow: hidden; 
width: 100%; 
position: fixed;

还不够，我没有在Safari的iOS上工作。我还必须添加：

top: 0;
left: 0;
right: 0;
bottom: 0;

为了使其运作良好。现在工作正常:)

— 疯子94
source
2

我曾经<body>和<div class="wrapper">

当弹出窗口打开时...

<body> 达到100％的高度并溢出：隐藏

<div class="wrapper"> 获取位置：相对；溢出：隐藏；高度：100％；

我使用JS / jQuery来获取页面的实际滚动位置，并将该值存储为正文的数据属性

然后我滚动到.wrapper DIV中的滚动位置（不在窗口中）

这是我的解决方案：

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：

body.locked {position:relative;overflow:hidden;height:100%;}
body.locked .wrapper {position:relative;overflow:hidden;height:100%;}

它在桌面和移动设备（iOS）上都可以正常使用。

欢迎小费和改进:)

干杯!

— 托格
source
1 
html {
  position:relative;
  top:0px;
  left:0px;
  overflow:auto;
  height:auto
}

将其默认添加到您的CSS

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

toggleClass此类切页面

当您关闭此类时，第一行将调用滚动条

— 隆冬
source
0

是的，这与safari中的新更新有关，如果您使用overflow：隐藏，则会破坏布局，以清除div。

— 李·麦卡利
source
10
您可以对此进行更详细的说明，还是引用来源？这个答案可能是正确的，但不是很有帮助。
— pjmorse 2014年
0

它确实适用，但仅适用于DOM中的某些元素。例如，它不适用于表，td或其他某些元素，但适用于<DIV>标记。
例如：

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

仅在iOS 4.3中测试。

较小的修改：使用overflow：scroll可能会更好，因此可以使用两个手指滚动。

— 亚当
source
0

为什么不将您不想显示的内容包装在带有类的元素中，然后将该类设置为display:none仅用于iPhone和其他手持设备的样式表？

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
<!--<![endif]-->
— S16
source
0

这是我做的事情：检查身体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);
}
— 阿里·S。
source
-3

只需将主体高度更改为<300像素（陆地上的移动视口的高度约为300像素至500像素）

JS

$( '.offcanvas-toggle' ).on( 'click', function() {
    $( 'body' ).toggleClass( 'offcanvas-expanded' );
});

的CSS

.offcanvas-expended { /* this is class added to body on click */
    height: 200px;
}
.offcanvas {
    height: 100%;
}
— 克里斯蒂安·莱皮
source
这不是一个非常好的解决方案，并且会在iOS设备上导致大于您最终选择的特定像素的问题。应该使用其他解决方案。
— Badrush
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.