Webkit taşması kaydırma touch iPad'de CSS hatası

Question

Bu sayfayı iPad'inizin en son sürümünde iPad'inizde ziyaret ederseniz, takip edebilirsiniz.

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

yeni -webkit-taşma-kaydırma ile iki eleman vardır: dokunma; özellik ve değer uygulandı. Soldaki gri alan bol miktarda içeriğe sahip ve portre veya manzarada ilerleyecek. Sağ sadece manzarada kayacak.

Yatay olarak başlatırsanız (manzarada yenileyin), iki alanı atalet kaydırma ile kaydırabilirsiniz. Harika çalışıyor. Şimdi iPad'inizi dikey olarak çevirin ve sadece sol el alanı kayacaktır. Bu amaçlandığı gibidir. Ancak manzaraya geri döndüğünüzde, sağ taraftaki alan artık hiç kaydırılmayacak, oysa sol taraftaki alan hala iyi durumda.

Bu durumun nasıl engelleneceği açıktır, ancak her zaman alanı doldurmak için gereken içeriğe sahip değilim.

Peki herhangi bir fikir?

Şimdiden teşekkürler,
Aslında tam aynı sorun yaşıyorum

Answer 1

:) olacaktır. Yönelimi değiştiğinde içeriği artık kaydırma gerektirmeyen DIV'leri etkilemesi gerçeğini deralttım.

Örneğinizde. Sağdaki DIV yatayda kayar, dikey olarak kaydırmaya gerek yoktur, ancak tekrar kaydırma yapması gerekir. Ben her iki DIV (sol ve sağ) yönelim ve bir sorun değil, kayması gerektiğinde bunu test ettik.

GÜNCELLEME:

Aslında görünüyor bu sabit olması!

Sorun bir zamanlama sorunu gibi görünüyor. Yeniden boyutlandırma sırasında iç içerik, taşma olan dış DIV üzerinde kaydırma yapmak için yeterince büyük değildir. Bu bir gün israf sonra nihayet bu hack ile geldi: sayfa boyutlandırır zaman

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

İşte benim mantık:

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

} 

Answer 2

benzer olan geç geliyor

, ancak daha basit bir çözüm.

var $el = $('.myElementClass'); 

function setOverflow(){ 
    $el.css({webkitOverflowScrolling: 'touch', overflow: 'auto'}); 
} 

function resizeHandler(){ 
    $el.css({webkitOverflowScrolling: 'auto', overflow: 'hidden'}); 
    setTimeout(setOverflow,10); 
} 

[DÜZENLE] Dikkat et, (çok) deney sonra ben öğrendim o display:none bildirimleri olacak mutlaka molawebkit-overflow-scrolling: touch özellik. Hiçbir zaman dokunma kaydırmayı desteklemesi gereken öğeler (veya öğelerden oluşan ebeveynler) üzerinde kullanmayın.

Answer 3

Aynı hatayı iPhone, iPod ve iPad'de de yaşadım. Bu sadece ikincisi ile sınırlı değildir.

Bir çözüm olarak öne sürüldü şeyi denedik, ama sonunda tatlı kombinasyon onun kabına e ekleyerek, eleman ayrılması olmak ve bunu yaparken açıkça, bunu kendi yüksekliğini atama şöyle sona erdi:

$(window).on('orientationchange', function(){ 
    var el = $('.troublemaker').detach(), 
     elh = el.height(); 
    setTimeout(el.css({'height':elh+'px'}).appendTo('.container'), 50); 
}); 

Answer 4

SetTimeout'u kullanmak zorunda kalmadan bu sorunu düzeltmek için iOS6 yeniden çizimini zorlamak için bilinen bir "düzeltme" özelliğini kullanabildim.