HTML/Javascript: Fix scroll position after screen rotation

What is the best way to restore the scroll position in an HTML document after the screen has been rotated? (This is in a Cocoa Touch UIWebView, but I think it's a problem everywhere.) The default behavior seems to restore the y-offset in pixels, but since the text has been reflowed this is now a different position in the document.

My initial thought is to:

1. Pepper the document with invisible, uniquely-id'ed elements.
2. Before rotation, search for the element e whose y-offset is closest to the scroll offset.
3. After rotation, update the scroll offset to e's new y-offset.

Even if that works, I'd prefer not to insert a bunch of crud into the document. Is there a better way?

Here's a diagram to clarify the problem. Restoring the original y-offset 开发者_开发问答does not produce the intended result because more text fits on a line in landscape mode.

Not pretty but it works. This requires there to be span tags throughout the document text.

// 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;
}

After rotation, document.getElementById(spanId).offsetTop is the new y-offset, where spanId is the result of findClosestLocator() before rotation.

Conceptually the problem isn't so hard to think about. You have scroll events, rotation events, and variables. I would track the scrollTop position on the document.body DOM node on the scroll event. Reapply it with the orientation event fires.

Something like this perhaps.

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