溢出: 隐藏应用于 < body > 在 iPhone Safari 上工作吗？

overflow:hidden适用于在 iPhone Safari 上工作的 <body>吗? 似乎不适用。 我不能在整个网站上创建一个包装来实现..。

你知道怎么解决吗？

例如: 我有一个很长的页面，我只是想隐藏在“折叠”下面的内容，它应该可以在 iPhone/iPad 上工作。

187807 次浏览
小开

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

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

是的，这与 Safari 中的新更新有关，如果您使用 overflow: hide 来清除 div，那么现在就会破坏您的布局。

小开

它确实适用，但它只适用于 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中测试过。

一个小小的编辑: 你可能最好使用溢出: 滚动，这样两个手指滚动确实工作。

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

我有一个类似的问题，并发现应用 overflow: hidden;的 html和 body都解决了我的问题。

html,
body {
overflow: hidden;
}

对于 iOS9，您可能需要使用以下代码: (谢谢 Chaenu!)

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

结合这里的答案和评论和 这个类似的问题为我工作。

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

下面是您需要如何在站点内容周围放置一个包装器 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;
}

我也是从 这个答案得到的灵感。

这个答案也有一些值得思考的东西。一些可能在桌面和设备上同样有效的东西。

小开

今天在 iOS8和9上出现了这个问题，看起来我们现在需要增加身高: 100% ;

加上

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

这里列出的一些解决方案在拉伸弹性滚动时出现了一些奇怪的故障:

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

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

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

将这个类分类以剪切页面

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

小开

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

当弹出窗口打开时。

<body>获得100% 的高度和溢出: 隐藏

<div class="wrapper">获得位置: 相对; 溢出: 隐藏; 高度: 100% ;

我使用 JS/jQuery 获取页面的实际滚动位置，并将值作为 data 属性存储到 body 中

然后我滚动到滚动位置 在包装 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)两方面都运行良好。

提示和改进是受欢迎的:)

干杯！

小开

它在 Safari 浏览器中工作。

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

对我来说:

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

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

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

为了让它工作得更好。现在工作得很好:)

小开

只需改变身高 < 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%;
}
小开

下面是我所做的: 我检查身体的 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);
}
小开
最佳答案

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

touch-action: none;
-ms-touch-action: none;
小开

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

overflow: revert;

我觉得这个可以正常工作

小开

如果你需要滚动模态

模式开启

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

很接近了

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

我的版本)在 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';
}


提交答案