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

Question

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

我最初的想法是：

1. 使用看不见的，唯一id'ed元素来加密文档。
2. 旋转前，搜索y偏移最接近滚动偏移的元素 e 。
3. 旋转后，将滚动偏移更新为 e 的新y偏移。

即使这样有效，我也不希望在文档中插入一堆crud。还有更好的方法吗？

---

这是一个澄清问题的图表。恢复原始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()的结果。

Answer 2

从概念上讲，问题并不那么难以思考。您有滚动事件，旋转事件和变量。我将跟踪scroll事件上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);