其實我有完全相同的問題。我已經縮小了它的範圍,它影響了在方向改變時內容不再需要滾動的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);
}
我完全忘了這個問題,實際上我最終還是把它弄清楚了,用完全相同的解決方案。我應該把代碼備份到這裏,節省了一些時間,哎呀!謝謝雖然:) – will 2012-05-11 08:49:29
找到另一種方式,如果任何人有興趣...任何意見歡迎。見下文。 – 2012-09-18 13:10:14
這真的很好。太糟糕了,故障必須首先出現在那裏。 – 2014-01-18 09:07:06