HTML / Javascript: исправление положения прокрутки после поворота экрана

Question

Каков наилучший способ восстановить положение прокрутки в документе HTML после поворота экрана?(Это в Cocoa Touch UIWebView, но я думаю, что это везде проблема.) Поведение по умолчанию, похоже, восстанавливает смещение по оси y в пикселях, но поскольку текст был переформатирован, теперь это другая позиция в документе.

Моя первоначальная мысль:

1. Перечеркнуть документ невидимыми элементами с уникальным идентификатором.
2. Перед вращением найдите элемент e , у которого смещение по y наиболее близко к смещению прокрутки.
3. После поворота измените смещение прокрутки на новое смещение по оси e .

Даже если это сработает, я бы предпочел не вставлять кучу грязи в документ.Есть ли лучший способ?

---

Вот диаграмма, чтобы прояснить проблему.Восстановление исходного смещения по оси 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

Концептуально проблема не так сложна.У вас есть события прокрутки, события вращения и переменные.Я бы отслеживал положение scrollTop на DOM-узле document.body в событии прокрутки.Повторно примените это с огнями события ориентации.