iphone - iOS overflow-x(或绝对位置)使滚动变得不稳定？

Question

我希望我的网页只能垂直滚动。所以我将 overflow-x:hidden; 设置为我的 .page-wrapper。我的 .page-wrapper 将两个绝对定位层放在彼此之上。单击按钮时，顶层会滑动到一侧(如 position:absolute; 所述)并使网站实际上比 100% 视口(viewport)更宽 - 因此它可以水平滚动。

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

如果我这样做，我的正常内容的垂直滚动就会出现错误并且无法正常工作。

有什么解决办法吗？

更新

-webkit-overflow-scrolling: touch; 似乎工作正常，只要没有 javascript 改变任何高度。请参见以下示例。我在这里所做的是将 body 的高度更新为第二层的 contents-height - 所以一旦上层向左滑动就没有空的滚动空间。当向后滑动上层时，我从主体中删除了属性 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');
    }
}

Answer 1

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

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