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

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

在我的情况下添加"位置:相对"没有帮助,但添加"位置:固定"工作. (43认同)
添加固定位置_does_解决了该问题，但它会使页面跳至顶部，如果在后台显示菜单或模式时在后台实现此操作，则对UX不利。为了制作出优质的UX，您应该在锁定位置之前存储页面的滚动位置，然后在解锁后重新应用它。 (4认同)
谢谢.您.当元素从视口外部转换到内部时,我遇到了一个大问题.会发生内容扩展的奇怪错误.这是我的解决方案! (3认同)

Answer 3

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

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

这很好(在我的情况下比`position:relative`效果更好)但是,在恢复默认样式(例如关闭菜单)后滚动位置会丢失. (3认同)
对于滚动位置，您可以使用 js（在此示例中为 jquery）执行以下操作：`// on menu open // save window pos $('body').attr('data-pos', $(window).scrollTop () ) ; // ... // 在菜单关闭时 // 滚动到保存的窗口 pos $( window ).scrollTop( $('body').attr( 'data-pos' ) );` (2认同)

Answer 4

经过多天的尝试，我找到了这个对我有用的解决方案：

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

Answer 5

今天在iOS 8和9上有这个问题,我们现在需要增加高度:100%;

所以加

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

Answer 6

它在 Safari 浏览器中工作。

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

Answer 7

对我来说：

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

还不够，我在 iOS 和 Safari 上都无法工作。我还必须补充：

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

为了使其发挥良好作用。现在工作正常:)