logo标签列表

如何在移动Safari上禁用滚动？

javascriptcssoverflowmobile-safari
156
我有一个很长的页面，我想隐藏在“折叠”下面的内容，并且它应该在iPhone/iPad上起作用。
应用于的overflow:hidden在移动Safari上似乎不起作用。 我不能在整个网站上创建一个包装器来实现这个...
你知道解决办法吗？
3
拼命寻找答案，希望能自己找到。 - mwilcox
19个回答
141

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

html,
body {
    overflow: hidden;
}

对于iOS 9，您可能需要使用这个替代方法：（感谢chaenu！）

html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
}
17
在iOS Safari上这不起作用。position: relative也是必要的。 - Kevin Borders
5
是的，将相对定位和溢出添加到HTML + body。 - wutang
4
即使在body和html上使用相对定位，这种方法在iOS 9上仍然无效。 - CJT3
9
Safari 是新的 IE11。 - funky-nd
3
这真是太疯狂了，不是吗？10年前，-webkit-非常出色，领先于其他浏览器，每个人都想成为-webkit-。现在到了2022年，苹果公司在支持Web方面犯了如此严重的错误，以至于今年没有一个月我没有遇到另一个问题，所有其他浏览器都能正常工作，而Safari却出现了问题。凭借苹果公司拥有的财务资源，他们应该对其Web产品的糟糕状态感到无比羞耻。 - Rounin
显示剩余11条评论
98
body {
  position:relative; // that's it
  overflow:hidden;
}
4
谢谢！当元素从视口外部过渡到内部时，我遇到了一个大问题。会出现一个奇怪的错误，其中内容被扩展了。这对我来说是解决方案！ - Eric
57
在我的情况下，添加“position: relative”并没有起作用，但是添加“position: fixed”可以解决问题。 - LeastOne
1
是的，这个方法可行。我正在构建一个网站，他们希望移动导航栏覆盖在内容上方 - 但当它打开时，导航栏后面的内容仍然可以滚动。其他使用位置、溢出和高度的答案也有效，但是使用高度时，当我打开导航栏时页面会跳到顶部。我想这可能是因为我的情况比较特殊，但我还是想提一下，以防其他有重叠导航栏的人遇到同样的问题。 - moonunit7
包装器放在哪里？这怎么算是完整的答案？ - Kugel
12
添加固定位置确实解决了问题，但它会使页面跳转到顶部，如果您在呈现菜单或模态时在后台实施此操作，则对UX不利。为了提供良好的UX，在锁定位置之前，您应该存储页面滚动位置，然后在解锁后重新应用它。 - mike
显示剩余2条评论
44

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

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

MDN touch-action文档

3
非常感谢你，我因为正在构建的模态组件在除 Safari 浏览器外的所有浏览器中都会阻止滚动而感到困惑。 - pakman198
你太棒了先生！谢谢你！ - savram
2
在iOS 15.3.1上，这对我没用，你是在body上使用这些规则吗？ - vaskort
1
我的问题更新：当我提前添加这个而不是使用一个在body元素上切换这些规则的类时，似乎已经解决了。 - vaskort
1
我没有使用类来通过JavaScript切换这些规则进行测试。但是在iOS 16上使用el.style.touchAction =“none”（然后返回“”）可以起作用。 - nishanthshanmugham
显示剩余2条评论
34
5
这很好（在我的情况下比“position: relative”效果更好），但是，在恢复默认样式后（例如关闭菜单），滚动位置会丢失。 - jmarceli
3
你可以使用JavaScript（在此示例中使用jQuery）来设定滚动位置，方法如下：//当菜单展开时 //保存当前窗口位置 $('body').attr('data-pos', $(window).scrollTop()); //... //当菜单关闭时 //滚动到保存的窗口位置 $(window).scrollTop($('body').attr('data-pos')); - Davey
那真的为我解决了问题！ - D.Steinel
12
今天在iOS 8＆9上出现了这个问题，似乎现在我们需要添加height：100％;。 因此，请添加。
html,
body {
  position: relative;
  height: 100%;
  overflow: hidden;
}
6

它可以在Safari浏览器中正常工作。

html,
body {
  overflow: hidden;
  position: fixed
}
5
对我而言，这个意味着：
height: 100%; 
overflow: hidden; 
width: 100%; 
position: fixed;

还不够，它在iOS上的Safari中也无效。我还需要添加：

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

让它良好运作。现在运行良好 :)
4

结合这里的答案和评论以及这个相似的问题，对我很有帮助。

因此，我整理出完整的答案如下。

以下是如何在站点内容周围添加一个包装器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;
}

我还从这个答案中得到了灵感。
而这个答案也提供了一些值得思考的内容。这些方法在桌面和设备上都能很好地工作。
这对我来说是个解决方案。 - Roel Magdaleno
1
当模态框关闭时，这会导致页面滚动到顶部。 - Jason
2

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

当弹出窗口打开时...

<body> 的高度变为100％，并设置overflow:hidden

<div class="wrapper"> 设置为position:relative;overflow:hidden;height:100%;

我使用JS/jQuery获取页面的实际滚动位置，并将该值存储为data-attribute以供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）上都运行良好。

欢迎提出提示和改进意见 :)

干杯！

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这个类用于切换页面

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接