2012-01-31 42 views
22

如果您在最新版本的iOS上的iPad設備上訪問此頁面,則可以按照步驟操作。Webkit溢出滾動觸摸iPad上的CSS錯誤

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

我與新-webkit溢出滾動兩個元素:觸摸;財產和價值適用。左側灰色區域內容豐富,可以縱向或橫向滾動。右側只會橫向滾動。

如果從橫向開始(刷新橫向),可以使用慣性滾動滾動這兩個區域。很棒。現在將您的iPad翻成肖像,只有左手區域會滾動。這是預期的。但是當你翻轉到風景時,右手區域將不再滾動,而左手區域仍然很好。

顯而易見,如何阻止這種情況的發生,但我並不總是有內容填補該區域。

那麼有什麼想法?

由於提前,
會:)

回答

15

其實我有完全相同的問題。我已經縮小了它的範圍,它影響了在方向改變時內容不再需要滾動的DIV。

在你的例子中。右側的DIV在橫向滾動,不需要縱向滾動,但需要再次滾動。我已經測試過這兩個DIV(左和右)需要滾動而不管方向和它不是問題。

更新:

我其實似乎已經修好了!

這個問題似乎是一個計時問題。在調整大小的過程中,內容不夠大,不足以保證在溢出的外部DIV上滾動。在這浪費了一天之後,我終於想出了這個技巧:

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

這裏是我的邏輯,只要在網頁調整大小:

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

} 
+0

我完全忘了這個問題,實際上我最終還是把它弄清楚了,用完全相同的解決方案。我應該把代碼備份到這裏,節省了一些時間,哎呀!謝謝雖然:) – will 2012-05-11 08:49:29

+0

找到另一種方式,如果任何人有興趣...任何意見歡迎。見下文。 – 2012-09-18 13:10:14

+0

這真的很好。太糟糕了,故障必須首先出現在那裏。 – 2014-01-18 09:07:06

19

具有類似遲到,但更簡單的解決方案。

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

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

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

[編輯] 當心,試驗(很多)之後,我發現display:none聲明必將突破webkit-overflow-scrolling: touch功能。 切勿將其用於支持觸摸滾動的元素(或元素的父項)。

+0

絕對簡單得多!對此略有變化(切換單獨的css類而不是手動修改屬性)對恢復原始溢出屬性更好。 – Krease 2012-11-05 22:33:49

+0

我想我也試過,但回去手動設置屬性。不知道爲什麼。 – 2012-11-06 08:00:33

+0

謝謝!我在ipad4上遇到了同樣的問題。這固定了它。我有和ProVega一樣的想法,但是這個解決方案似乎更加清晰。非常感謝!你節省了我一些時間! – 2013-08-07 21:17:44

2

我在iPhone,iPod和iPad上遇到過同樣的錯誤。這不僅限於後者。

我試過,建議將解決一切,但最終的甜蜜組合最終被拆卸的元素,其附加到其容器並明確分配給它自己的高度,而這樣做,就像這樣:

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

我能夠使用已知的「修復」來強制iOS6重繪來糾正這個問題,而無需使用setTimeout。

$(window).on('orientationchange', function() 
{ 
    var $elem=$('[selector]'); 
    var orgDisplay=$elem.css('display'); 
    $elem.css('display','none'); 
    $elem.get(0).offsetHeight; 
    $elem.css('display',orgDisplay); 
}); 
+0

我喜歡在方向改變時「切換」顯示狀態的解決方案。我覺得比重新計算高度需要更少的資源。 – 2014-05-27 16:35:03

+0

我也喜歡這個解決方案。不幸的是,它不直接爲我工作。 'orientationchange'之後需要額外的'setTimeout'。仍然更喜歡明確設置高度。 – WrongAboutMostThings 2014-07-21 14:37:29

+0

千上傳給你。 – 2015-09-21 15:30:05

相關問題