HTML/Javascript:在屏幕旋转后修复滚动位置

Question

旋转屏幕后,恢复HTML文档中滚动位置的最佳方法是什么？(这是在Cocoa Touch UIWebView中,但我认为这是一个问题无处不在.)默认行为似乎恢复y偏移(以像素为单位),但由于文本已经重排,因此现在文档中的位置不同.

我最初的想法是:

1. 用无形的,独特的id'ed元素来丰富文档.
2. 在旋转之前,搜索y偏移最接近滚动偏移的元素e.
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()。