iOS溢出X（或绝对位置）使滚动波涛汹涌？
我希望我的网页只能垂直滚动。 所以我设置了overflow-x:hidden; 到我的.page-wrapper 。 我的.page-wrapper将两个绝对定位的层放在一起。 当点击一个button时，最上面的图层会滑到一边（如上面提到的position:absolute; ），使得网站实际上比100％的viewport宽，所以它可以水平滚动。
为了防止水平滚动，我设置了overflow-x:hidden到我的.page-wrapper 。
如果我这样做，我的正常内容的垂直滚动真的是越野车，并不能正常工作。
任何想法如何解决？
UPDATE
-webkit-overflow-scrolling: touch; 似乎工作正常，只要没有JavaScript正在改变任何高度。 看下面的例子。 我在这里做的是更新身体高度的内容高度的第二层 – 所以没有空的滚动空间，一旦上层滑到左边。 当滑回上层时，我从主体中删除属性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'); } }
你可以尝试在.page-wrapper上设置width:100% ，并将其设置为overflow:hidden和position:relative 。 这可能会阻止水平滚动。
更新10/12/2012
感谢代码示例。 这真的帮助我更清楚地看到你的意图和问题。 它看起来像你需要-webkit溢出滚动 。 添加-webkit-overflow-scrolling: touch; 到page-wrapper 。 这是应用了该规则的[更新testing页面]。 您可以在下面的评论中与testing页面进行比较，以查看差异。
尝试将其应用于每个元素：
* { -webkit-overflow-scrolling: touch; }
TLDR; 将transform: translate3d(0px,0px,0px)应用于元素和包装器。
在我的情况下，绝对或固定的位置元素隐藏在主页后面有一个较小的z-索引。 其结果是，当包装被移出的方式来陶醉元素，然后移回来，在iOS上有一个延迟，当试图滚动该元素的位置。 我可以滚动，但我不得不坚持一会儿。
这里描述的解决scheme适用于我： https : //css-tricks.com/forums/topic/mobile-safari-iphone-issue-with-position-fixed-content-running-over-the-top/
基本上，元素和元素的包装都需要应用样式transform: translate3d(0px,0px,0px) ，然后滚动顺利进行。 对我而言，没有将其应用于元素和包装，修复程序无法正常工作。