我遇到了类似的问题，发现将 overflow: hidden; 应用于 html 和 body 解决了我的问题。
html,
body {
overflow: hidden;
}
对于 iOS 9，您可能需要改用它：（感谢 chaenu！）
html,
body {
overflow: hidden;
position: relative;
height: 100%;
}
body {
position:relative; // that's it
overflow:hidden;
}
此处列出的一些解决方案在拉伸弹性滚动时会出现一些奇怪的故障。要解决我使用的问题：
body.lock-position {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
来源：http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/
position: relative 效果更好）但是，在恢复默认样式（例如关闭菜单）后滚动位置会丢失。
// 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' ) );
经过几天的尝试，我发现这个解决方案对我有用：
touch-action: none;
-ms-touch-action: none;
body 上使用了这些规则，对吗？
body 元素上打开和关闭这些规则的类时，这似乎已经奏效。
今天在 iOS 8 和 9 上遇到了这个问题，看来我们现在需要添加 height: 100%;
所以添加
html,
body {
position: relative;
height: 100%;
overflow: hidden;
}
结合此处的答案和评论，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 也有一些值得深思的地方。在台式机和设备上可能同样适用的东西。
它在 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;
让它运作良好。现在工作正常:)
我曾与<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）。
欢迎提示和改进:)
干杯!
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 这个类来切页
当您关闭此类时，第一行将调用滚动条
是的，这与 safari 中的新更新有关，如果您使用 overflow: hidden 来处理清除 div，这些更新现在会破坏您的布局。
它确实适用，但仅适用于 DOM 中的某些元素。例如，它不适用于 table、td 或其他一些元素，但它适用于
<body>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
仅在 iOS 4.3 中测试。
一个小的编辑：你可能最好使用溢出：滚动，所以两个手指滚动确实有效。
为什么不用类将您不希望显示在元素中的内容包装起来，并将该类设置为 display:none 在仅适用于 iphone 和其他手持设备的样式表中？
<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
<!--<![endif]-->
这是我所做的：我检查身体 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);
}
一个 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 = '';常量 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'] = ''; } 其他 { document.body.style.top = `-${window.scrollY}px`; document.querySelector('html').style.height = `${window.innerHeight - 1}px`; document.body.style.position = '固定'; document.body.style.left = '0'; document.querySelector('body').style.overflow = 'hidden'; document.querySelector('html').style.overflow = 'hidden'; document.querySelector('html').style['scroll-behavior'] = 'unset'; }
只需更改 body height < 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%;
}
关注公众号
不定期副业成功案例分享
想领先一步获取最新的外包任务吗？
立即订阅
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。
position: relative之后，正文仍然可以滚动。