HTML/Javascript：画面回転後のスクロール位置の修正

Question

画面を回転させた後にHTML文書のスクロール位置を復元する最も良い方法は何ですか？ （これはCocoa TouchのUIWebViewにありますが、どこにでも問題があると思います）。デフォルトの動作はyオフセットをピクセル単位で復元しているようですが、テキストがリフローされているのでドキュメントの位置が変わります。

1. ペッパー目に見えない、ユニークなid'ed要素を持つ文書：

   私の最初に考えたのはにあります。

2. 回転前に、yオフセットがスクロールオフセットに最も近い要素を検索します。
3. 回転後、スクロールオフセットをeの新しいyオフセットに更新します。

これが機能しても、私はドキュメントにcrudの束を挿入したくないです。より良い方法がありますか？

---

ここに問題を明確にするための図があります。ランドスケープモードの行に多くのテキストが収まるため、元のyオフセットを復元しても意図した結果が得られません。

Answer 1

うまくないですが動作します。これには、文書テキスト全体にスパンタグが必要です。回転後

// Return the locator ID closest to this height in pixels. 
function findClosestLocator(height) { 
    var allSpans = document.getElementsByTagName("span"); 
    var closestIdx = 0; 
    var closestDistance = 999999; 
    for(var i = 0; i < allSpans.length; i++) { 
     var span = allSpans[i]; 
     var distance = Math.abs(span.offsetTop - height); 
     if(distance < closestDistance) { 
      closestIdx = i; 
      closestDistance = distance; 
     } 
    } 
    return allSpans[closestIdx].id; 
} 

、document.getElementById(spanId).offsetTop新しいYオフセット、spanIdが回転前findClosestLocator()の結果です。

Answer 2

概念的に問題が考えることをそれほど難しいことではありません。スクロールイベント、回転イベント、および変数があります。スクロールイベントのdocument.body DOMノードのscrollTop位置を追跡します。オリエンテーションイベントの火災でそれを再適用してください。

これはおそらくこのようなものです。

// Track position 
var pos; 

// On scroll update position 
document.body.addEventListener("scroll", function() { 
    pos = document.body.scrollTop; 
}, true); 

// On rotation apply the scroll position 
window.addEventListener("orientationchange", function() { 
    document.body.scrollTop = pos; 
}, true);