是否溢出：隐藏应用于 <body> 在 iPhone Safari 上工作？答案

【问题标题】：Does overflow:hidden applied to <body> work on iPhone Safari?是否溢出：隐藏应用于 <body> 在 iPhone Safari 上工作？
【发布时间】：2011-03-04 02:30:27
【问题描述】：

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

你知道解决办法吗？

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

【问题讨论】：

自己拼命寻找这个问题的答案。

标签： iphone css ipad safari overflow

【解决方案1】：

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

html,
body {
    overflow: hidden;
}

对于 iOS 9，您可能需要改用这个：（感谢 chaenu！）

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

【讨论】：

这不适用于 iOS Safari。 position: relative 也是必要的。
是的，将相对和溢出都添加到 html + body
这在 iOS 9 上不起作用，即使在 body 和 html 上使用相对位置
一句警告，标签上隐藏的溢出会破坏jQuery的滚动事件
这对我在 iOS 9 Safari 上不起作用。在添加 position: relative 之后，正文仍然可以滚动。

【解决方案2】：

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

【讨论】：

谢谢。你。当元素从视口外部过渡到内部时，我遇到了一个大问题。内容被扩展时会出现一个奇怪的错误。这就是我的解决方案！
在我的情况下，添加“位置：相对”并没有帮助，但添加“位置：固定”有效。
这行得通。我正在建立一个网站，他们希望移动导航浏览内容 - 但是当它打开时，后台导航后面的内容仍然滚动。位置、溢出和 height 的其他答案也有效，但是当我打开导航时，页面会跳到顶部。我想这对我的情况来说是独一无二的，但我只是想我会提到它，以防其他任何有覆盖导航的人有同样的问题。
包装器去哪儿了？这是一个完整的答案吗？
添加固定位置确实解决了这个问题，但它会使页面跳转到顶部，如果你在演示时在后台实现它，这对用户体验不利菜单或模式。做一个好的UX，你应该在锁定位置之前存储页面的滚动位置，解锁后重新应用。

【解决方案3】：

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

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

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

【讨论】：

这很好（在我的情况下比position: relative 效果更好）但是，在恢复默认样式后滚动位置会丢失（例如关闭菜单）。
对于滚动位置，您可以使用 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' ) );
这对我来说真的很成功！

【解决方案4】：

经过多天的尝试，我找到了适合我的解决方案：

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

【讨论】：

非常感谢，我正在为我正在构建的模式组件而疯狂，该组件阻止除 safari 之外的所有浏览器中的滚动
你摇滚先生！谢谢！

【解决方案5】：

今天在 iOS 8 和 9 上遇到了这个问题，看来我们现在需要添加 height: 100%；

所以添加

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

【讨论】：

【解决方案6】：

在这里结合答案和 cmets 和 this similar question here 对我有用。

所以发布一个完整的答案。

以下是您需要在您的网站内容周围放置一个包装 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>

如下创建包装类。

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

我也是从this answer here那里得到这个想法的。

而this answer here 也有一些值得深思的地方。在台式机和设备上可能同样适用的东西。

【讨论】：

这是我的解决方案。
当模式关闭时，这会导致页面滚动到顶部。

【解决方案7】：

它在 Safari 浏览器中工作。

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

【讨论】：

【解决方案8】：

对我来说：

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

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

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

让它运作良好。现在工作正常:)

【讨论】：

【解决方案9】：

我曾与<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)。

欢迎提供提示和改进:)

干杯！

【讨论】：

【解决方案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 这个类来切页

当你关闭这个类时，第一行将调用滚动条

【讨论】：

【解决方案11】：

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

【讨论】：

你能详细说明一下吗，或者引用一个来源？这个答案可能是正确的，但不是很有帮助。

【解决方案12】：

它确实适用，但它只适用于 DOM 中的某些元素。例如，它不适用于表格、td 或其他一些元素，但它适用于

标记。
例如：

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

仅在 iOS 4.3 中测试。

一个小修改：最好使用overflow:scroll，这样两个手指滚动就可以了。

【讨论】：

【解决方案13】：

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

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

【讨论】：

【解决方案14】：

这就是我所做的：我检查身体 y 位置，然后将身体固定并将顶部调整到该位置的负值。反过来，我将 body 设为静态，并将滚动设置为我之前记录的值。

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

【讨论】：

【解决方案15】：

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

overflow: revert;

我认为这会正常工作

【讨论】：

【解决方案16】：

如果你需要滚动模式

模态打开

$('body').attr('data-position', $(window).scrollTop());
$('body').css({'overflow' : 'hidden', 'position' : 'fixed'});

模态关闭

$('body').css({'overflow' : 'unset', 'position' : 'unset'});
$(window).scrollTop( $('body').attr( 'data-position' ));

【讨论】：

【解决方案17】：

我的版本）在 iOS 中工作

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

【讨论】：

【解决方案18】：

只需更改主体高度

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

【讨论】：

不是一个非常优雅的解决方案，并且会在大于您最终选择的特定像素的 iOS 设备上导致问题。应该使用不同的解决方案。