Question

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.

Answer 1

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.