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

问题描述

我希望我的网页只能垂直滚动。所以我设置了 overflow-x：hidden; 到我的 .page-wrapper 。我的 .page-wrapper 在两个绝对定位的层的顶部。当点击按钮时，顶层滑动到一边（如 position：absolute; ），使得网站实际上比100％视口宽，因此它将是

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

如果我这样做，垂直滚动我的正常内容是真的错误，

有什么想法如何解决？

UPDATE >

-webkit溢出滚动：touch; 似乎工作正常，只要没有javascript改变任何高度。请参阅以下示例。我在这里做的是将body的高度更新为第二层的contents-height - 因此，一旦上层向左滑动，就不会有空的滚动空间。当滑动上层回来我从身体删除attribte style （设置高度）。

  function showInfos（show）{
 
 if ）{
 $（'＃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 。这可能会阻止水平滚动。

更新于10/12/2012

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

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.

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?

UPDATE

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

解决方案

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

Updated 10/12/2012

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屋！