javascript - HTML/JavaScript : Fix scroll position after screen rotation

Question

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

我最初的想法是:

1. 用不可见的、唯一标识的元素来装饰文档。
2. 在旋转之前，搜索 y 偏移量最接近滚动偏移量的元素 e。
3. 旋转后，将滚动偏移量更新为e 的新 y 偏移量。

即使可行，我也不想在文档中插入一堆垃圾。有没有更好的办法？

---

这里有一张图表来阐明这个问题。恢复原始 y 偏移不会产生预期的结果，因为在横向模式下更多文本适合一行。

Answer 1

虽然不漂亮，但很管用。这要求在整个文档文本中都有 span 标签。

// 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() 的结果> 旋转前。