Webkit溢出滚动触摸iPad上的CSS错误 [英] Webkit overflow scrolling touch CSS bug on iPad

问题描述

如果您在iPad设备上使用最新版本的iOS访问此页面，您可以按照此操作。

http://fiddle.jshell.net/will/8VJ58/10/show/light/

我有两个元素与新的-webkit溢出滚动：touch;属性和值。左侧灰色区域有大量内容，并将在纵向或横向滚动。

如果您以风景开始（在风景中刷新），您可以使用惯性滚动滚动这两个区域。工程伟大。现在将iPad翻转成纵向，只有左​​手区域将滚动。这是想要的。但是当你回到风景时，右手区域将不再滚动，而左手区域仍然很好。

很明显如何阻止这种情况，

感谢您的支持。

我实际上遇到了完全相同的问题。我已经把它缩小到这样的事实，即它影响的DIV，其内容不再需要滚动时改变方向。

在您的示例中。右侧的DIV在风景中滚动，不需要在纵向滚动，但是需要再次滚动。我已经测试了这两个DIV（左和右）需要滚动无论方向，它不是一个问题。

更新：

我似乎已经解决了这个问题。

这个问题似乎是一个时间问题。在调整大小时，内部内容不够大，不足以保证在已溢出的外部DIV上滚动。浪费了一天后，我终于想出了这个黑客：

 < div id =headerstyle = position：fixed; height：100px>标头< / div> 
< div id =contentstyle =overflow：auto; -webkit-overflow-scrolling：touch> 
< div id =contentInner> 
不足以在不同方向滚动的内容
< / div> 
< / div> 
  

这是我的逻辑，每当页面调整大小：

  function handleResize（）
 {
 var iHeight = $（window）.height（） -  $（＃header）。 
 
 //需要设置高度，允许滚动 -  
 //这是固定的容器，滚动
 $（'＃content'）。height（iHeight -  10）; 
 
 //暂时中断内部内容，FORCE ipad在调整大小时滚动
 //这是一个时序问题，内部内容在调整大小后定向时不够大，需要外部DIV滚动
 $（'＃contentInner'）。height（1000）; 
 
 //将高度设置回正常值
 //我们必须暂停足够长的时间来重新调整大小才能完成
 window.setTimeout（delayFix，10 ）; 
} 
 
 function delayFix（）
 {
 var iHeight = $（window）.height（） -  $（＃header）。 
 
 //内部div强制外部div总是至少有一些东西滚动。这使得内部DIV总是橡皮筋，并防止
 //页面滚动的地方没有理由。 
 //内部的家伙的高度需要至少和容器​​一样大，实际上是一个更大的nip，以使
 //可滚动区域正确的'橡皮筋'
 $ '#contentInner'）。height（iHeight + 20）; 
 
} 
  

If you visit this page on your iPad device on the latest version of iOS you can follow along.

http://fiddle.jshell.net/will/8VJ58/10/show/light/

I have two elements with the new -webkit-overflow-scrolling: touch; property and value applied. The left hand grey area has plenty of content and will scroll in portrait or landscape. The right will only scroll in landscape.

If you start in landscape (refresh in landscape) you can scroll both areas with the inertia scrolling. Works great. Now flip your iPad into portrait and only the left hand area will scroll. This is as intended. But when you flip back to landscape the right hand area will no longer scroll at all, whereas the left hand area is fine still.

It's obvious how to stop this happening, but I don't always have the content to fill the area.

So any ideas?

Thanks in advance,
Will :)

解决方案

I am actually having the exact same issue. I have narrowed it down to the fact that it affects DIVs whose content's no longer require scrolling when the orientation is changed.

In your example. The DIV on the right scrolls in landscape, does not NEED to scroll in portrait, but then needs to scroll again. I have tested this when both DIVs (left and right) need to scroll regardless of orientation and its not a problem.

UPDATE:

I actually seem to have fixed this!

The issue appears to be a timing issue. During resize the inner content is not big enough to warrant scrolling on the outer DIV that has overflow. After wasting a day on this, I finally came up with this hack:

<div id="header" style="position:fixed; height:100px">Header</div>
<div id="content" style="overflow: auto; -webkit-overflow-scrolling: touch">
   <div id="contentInner">
      content that is not long enough to always scroll during different orientations
   </div>
</div>

Here is my logic whenever the page resizes:

   function handleResize()
    {
        var iHeight = $(window).height() - $("#header").height();

        // Height needs to be set, to allow for scrolling - 
        //this is the fixed container that will scroll
        $('#content').height(iHeight - 10);

        // Temporarily blow out the inner content, to FORCE ipad to scroll during resizing
        // This is a timing issue where the inner content is not big enough during resize post orientation to require the outer DIV to scroll
        $('#contentInner').height(1000);

        // Set the heights back to something normal
        // We have to "pause" long enough for the re-orientation resize to finish
        window.setTimeout(delayFix, 10);
}

function delayFix()
{
    var iHeight = $(window).height() - $("#header").height();

    // Inner divs force the outer div to always have at least something to scroll.  This makes the inner DIV always "rubber-band" and prevents
    // the page from scrolling all over the place for no reason.
    // The height of the inner guy needs to be AT LEAST as big as the container and actually a nip bigger to cause the
    // scrollable area to 'rubber band' properly
    $('#contentInner').height(iHeight + 20);

}

这篇关于Webkit溢出滚动触摸iPad上的CSS错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！