我希望我的网页只能垂直滚动。所以我已经将overflow-x:hidden;设置为我的.page-wrapper。我的.page-wrapper将两个绝对定位的层放在一起。当点击按钮时，顶层会滑动到一边(如position:absolute;所述)，并使网站实际上比100%视口宽度更宽，因此它可以水平滚动。
为了防止水平滚动，我将overflow-x:hidden设置为.page-wrapper。
如果我这样做，我的正常内容的垂直滚动真的很有问题，不能正常工作。
有什么办法解决的吗？
更新
只要javascript不改变任何高度，-webkit-overflow-scrolling: touch;似乎就可以正常工作。请参见以下示例。我在这里所做的是将正文的高度更新为第二层的内容高度，这样，一旦上层向左滑动，就不会有空的滚动空间。当将上层向后滑动时，我将属性style(用于设置高度)从身体上移除。做完之后，卷轴又开始起伏了。
function showInfos(show) {
if ( show ) {
$('#videos').addClass('slid');
$('body').height($('#infos > .content').height());
$('#page-wrap').addClass('no-overflow');
} else if ( !show ) {
$('#videos').removeClass('slid');
$('#page-wrap').removeClass('no-overflow');
$('body').removeAttr('style');
}
}
尝试将其应用于每个元素：
* {
-webkit-overflow-scrolling: touch;
}
您可以尝试在.page-wrapper上设置width:100%，并将其设置为overflow:hidden和position:relative。这可能会阻止水平滚动。
更新日期：2012年12月10日
谢谢你的代码示例。它确实帮助我更清楚地了解了你的意图和滚动的问题。看起来你需要-webkit溢出滚动。将-webkit-overflow-scrolling: touch;添加到page-wrapper。这是一个应用了该规则的[更新的测试页面]。你可以在下面的评论中与测试页面进行比较，看看有什么不同。
这为我完成了任务，所以在任何页面上都不是问题：
html {
-webkit-overflow-scrolling: touch;
}
所以我在Bootstrap 4.5模板上遇到了这个问题：每当我添加'overflow-x:hidden；'时对于.page wrapper，iPhone上的滚动不再流畅，而是断断续续。
但当我删除"overflow-x:隐藏；"从.page wrapper，在iPad上用户可以水平移动页面，这是不希望的。
Tim的解决方案是一个很好的方向，对我来说，最简单的解决方案就是在我的CSS文件中添加这两个部分：
位于CSS顶部：
html, body {width:100%; height:100%;}
在CSS中：
.page-wrapper {
/** overflow-x: hidden; GIVES ISSUES WITH IPHONE!!! **/
width:100%;
height:100%;
position:relative;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}
不要忘记放入索引。html:
<META name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no'>
TLDR；将CCD_ 15应用于元素和包装器。
在我的例子中，一个绝对或固定位置的元素通过一个较小的z索引隐藏在主页面后面。结果是，在iOS上，当包装器被移到一边来展示元素，然后又移回时，试图滚动到元素所在的位置时会出现延迟。我可以滚动，但我必须按住大约一秒钟。
这里描述的解决方案对我有效：https://css-tricks.com/forums/topic/mobile-safari-iphone-issue-with-position-fixed-content-running-over-the-top/
基本上，元素和元素的包装器都需要应用样式transform: translate3d(0px,0px,0px)，然后滚动才能顺利进行。对我来说，如果不将它同时应用于元素和包装器，修复就不起作用。