iOS溢出-x(或绝对位置)使滚动断断续续? [英] iOS overflow-x (or position absolute) makes scrolling choppy?

问题描述

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

I want my webpage to be only scrollable vertically. So I've set overflow-x:hidden; to my .page-wrapper. My .page-wrapper holds two absolute positioned layers on top of each other. When clicking a button the top layer is sliding to the side (as mentioned position:absolute;) and makes the website actually wider than the 100% viewport witdh - so it would be scrollable horizontally.

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

To prevent the horizontal scrolling I've set overflow-x:hidden to my .page-wrapper.

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

If I do that, the vertical scrolling of my normal content is really buggy and doesn't work correctly.

有什么想法可以解决这个问题吗?

Any ideas how to fix that?

更新

-webkit-overflow-scrolling: touch; 似乎工作正常，只要没有 javascript 改变任何高度.请参阅以下示例.我在这里做的是将主体的高度更新为第二层的内容高度 - 因此一旦上层滑动到左侧，就没有空的滚动空间.当将上层向后滑动时，我从正文中删除了属性 style(设置高度).这样做之后，卷轴再次断断续续.

-webkit-overflow-scrolling: touch; seems to work fine as long no javascript is changing any heights. See the following example. What I'm doing here is updating the height of the body to the contents-height of the second layer - so there is no empty scrolling space once the upper layer is slid to the left. When sliding the upper layer back I remove the attribte style (which sets the height) from the body. After doing that the scroll is choppy again.

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.这可能会阻止水平滚动.

You could try setting width:100% on .page-wrapper and set that to overflow:hidden and position:relative. That might prevent the horizontal scroll.

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

Thanks for the code example. It really helped me see your intent and the issue with scrolling more clearly. It looks like you need -webkit-overflow-scrolling. Add -webkit-overflow-scrolling: touch; to page-wrapper. Here's an [updated test page] with that rule applied. You can compare with test page in my comment below to see the difference.

这篇关于iOS溢出-x(或绝对位置)使滚动断断续续?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！