iOS 溢出-x（或绝对位置）使滚动不连贯？

Question

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

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

如果我这样做，我的正常内容的垂直滚动确实有问题并且无法正常工作。

有什么办法解决这个问题吗？

更新

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

Answer 1

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

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

Answer 2

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

2012 年 10 月 12 日更新

感谢代码示例。它确实帮助我更清楚地了解您的意图和滚动问题。看起来你需要-webkit-overflow-scrolling。将-webkit-overflow-scrolling: touch; 添加到page-wrapper。这是应用了该规则的 [更新的测试页面]。您可以在我下面的评论中与测试页进行比较，看看有什么不同。

Answer 3

这为我完成了这项工作，因此它在任何页面上都不是问题：

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

Answer 4

所以我在 Bootstrap 4.5 模板上遇到了这个问题：每当我添加 'overflow-x:hidden;'到 .page-wrapper 后，iPhone 上的滚动不再流畅，而是断断续续。

但是当我删除 'overflow-x:hidden;'来自 .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;
}

别忘了放入 index.html：

<META name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no'>

Answer 5

TLDR;将transform: translate3d(0px,0px,0px) 应用于元素和包装器。

在我的例子中，一个绝对或固定位置的元素通过较小的 z-index 隐藏在主页后面。结果是，当包装器移开以使元素陶醉，然后移回时，在 iOS 上，尝试滚动该元素所在的位置时会出现延迟。我可以滚动，但我必须按住大约一秒钟。

这里描述的解决方案对我有用： https://css-tricks.com/forums/topic/mobile-safari-iphone-issue-with-position-fixed-content-running-over-the-top/

基本上，元素和元素的包装器都需要应用transform: translate3d(0px,0px,0px) 样式，然后滚动顺利进行。对我来说，如果不对元素和包装器都应用它，修复不起作用。