iOS溢出-x(或位置绝对)使滚动波涛汹涌?

时间:2012-10-11 18:08:48

标签: iphone ios css scroll

我希望我的网页只能垂直滚动。所以我已将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');
    }
}

5 个答案:

答案 0 :(得分:54)

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

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

答案 1 :(得分:33)

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

2012年10月12日更新

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

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

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

但是当我删除“ overflow-x:hidden;”时通过iPad上的.page-wrapper,用户可以水平移动页面,这是不希望的。

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'>

答案 4 :(得分:-2)

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),然后滚动顺利进行。对我来说,没有将它应用于元素和包装器,修复程序都不起作用。