iOS overflow-x(或绝对位置)会让滚动起伏不定？

Question

我希望我的网页只能垂直滚动.所以我已经设定overflow-x:hidden;了我的.page-wrapper.我.page-wrapper把两个绝对定位的层叠在一起.单击按钮时,顶层滑动到侧面(如上所述position:absolute;)并使网站实际上比100%视口更宽 - 因此它可以水平滚动.

为了防止水平滚动我设置overflow-x:hidden为我的.page-wrapper.

如果我这样做,我的正常内容的垂直滚动实际上是错误的,并且无法正常工作.

任何想法如何解决？

UPDATE

-webkit-overflow-scrolling: touch;似乎工作得很好,因为没有javascript正在改变任何高度.请参阅以下示例.我在这里做的是将主体的高度更新为第二层的内容高度 - 因此一旦上层向左滑动,就没有空的滚动空间.当向上滑动上层时,我style从主体上移除了attribte (设置高度).在这样做后,滚动再次波动.

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

Answer 1

尝试将其应用于每个元素:

* {
  -webkit-overflow-scrolling: touch;
}

Answer 2

您可以尝试width:100%启用.page-wrapper并将其设置为overflow:hidden和position:relative.这可能会阻止水平滚动.

更新于10/12/2012

感谢您的代码示例.它真的帮助我更清楚地看到你的意图和滚动问题.看起来你需要-webkit-overflow-scrolling.添加-webkit-overflow-scrolling: touch;到page-wrapper.这是应用该规则的[更新的测试页面].您可以在下面的评论中与测试页面进行比较,以查看差异.