Question

overflow:hidden是否适用于<body>适用于iPhone Safari？似乎没有。我无法在整个网站上创建一个包装器来实现...

你知道解决方案吗？

示例：我有一个很长的页面，只是我想要隐藏“折叠”下面的内容，它应该适用于iPhone / iPad。

Answer 1

我遇到了类似问题，发现将overflow: hidden;应用于html和body解决了我的问题。

html,
body {
    overflow: hidden;
}

对于iOS 9，您可能需要使用它：（谢谢chaenu！）

html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
}

Answer 2

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

Answer 3

这里列出的一些解决方案在拉伸弹性滚动时有一些奇怪的故障。解决我使用过的问题：

send

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

Answer 4

今天在iOS 8＆amp; 9似乎我们现在需要增加高度：100％;

所以添加

html,
body {
  position: relative;
  height: 100%;
  overflow: hidden;
}

Answer 5

在这里结合答案和评论，this similar question here为我工作。

所以张贴整个答案。

以下是您需要在<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;
}

我也从this answer here得到了这个想法。

this answer here也有一些值得思考的东西。在台式机和设备中可能同样有效的东西。

Answer 6

它在Safari浏览器中工作。

html,
body {
  overflow: hidden;
  position: fixed
}

Answer 7

对我而言：

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

还不够，我在Safari上没有在iOS上工作。我还必须补充：

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

让它运作良好。现在工作正常：）

Answer 8

尝试了许多天后，我发现了适合我的解决方案：

touch-action: none;
-ms-touch-action: none;

Answer 9

为什么不在一个带有类的元素中包含您不希望显示的内容，并将该类设置为仅适用于iphone和其他手持设备的样式表中的display:none？

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

Answer 10

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这个类来剪切页面

关闭此课程时，第一行将调用滚动条

Answer 11

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

合作过

当弹出窗口打开...

<body>获得100％的高度和溢出：隐藏

<div class="wrapper">得到位置：相对;溢出：隐藏;高度：100％;

我使用JS / jQuery来获取页面的实际滚动位置并将值存储为body-attribut到body

然后我滚动到.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）。

欢迎提示和改进：）

干杯！

Answer 12

是的，这与safari中的新更新相关，如果您使用overflow：hidden来处理清除div，则现在会破坏您的布局。

Answer 13

确实适用，但它仅适用于DOM中的某些元素。例如，它不适用于table，td或其他一些元素，但它可以在＆lt; DIV＆gt;上工作。标签。
例如：

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

仅在iOS 4.3中测试过。

次要编辑：你可能最好使用溢出：滚动，这样两个手指滚动就可以了。

Answer 14

简单地改变身高＆lt; 300px（陆地空间的移动视口高度约为300px至500px）

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%;
}

Answer 15

这是我所做的：我检查主体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);
}

Answer 16

一个CSS关键字值，它将属性的值重置为浏览器在其UA样式表中指定的默认值，就好像该网页未包含任何CSS。例如，display:revert上的<div>将产生display:block。

overflow: revert;

我认为这会正常工作

溢出：隐藏是否适用于iPhone Safari？

16 个答案: