HTML/Javascript: Napraw pozycję przewijania po obróceniu ekranu

Question

Jaki jest najlepszy sposób na przywrócenie pozycji przewijania w dokumencie HTML po obróceniu ekranu? (To jest w interfejsie UIWebView w Cocoa Touch, ale myślę, że jest to problem wszędzie.) Domyślne zachowanie wydaje się przywracać przesunięcie y w pikselach, ale ponieważ tekst został ponownie przepełniony, teraz jest to inna pozycja w dokumencie.

Moją pierwszą myślą jest:

1. pieprz dokumentu z niewidzialnych, unikalnie-id'ed elementów.
2. Przed obróceniem wyszukaj element e, którego offset y jest najbliższy przesunięciu przewijania.
3. Po obróceniu, zaktualizuj przesunięcie przewijania do nowego Y-offset e.

Nawet jeśli to zadziała, wolałbym nie wrzucać do dokumentu pęknięcia. Czy istnieje lepszy sposób?

---

Oto schemat wyjaśniający problem. Przywrócenie oryginalnego przesunięcia y nie daje zamierzonego wyniku, ponieważ więcej tekstu pasuje do linii w trybie poziomym.

Answer 1

Nie ładna, ale działa. Wymaga to umieszczenia znaczników span w całym tekście dokumentu.

// 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; 
} 

Po obróceniu document.getElementById(spanId).offsetTop jest nowy y offset, gdzie spanId jest wynikiem findClosestLocator() przed obrotem.

Answer 2

Konceptualnie problem nie jest tak trudno o tym myśleć. Masz zdarzenia przewijania, zdarzenia rotacji i zmienne. Śledziłbym pozycję scrollTop na document.body DOM w węźle. Zastosuj ponownie z pożarem zdarzeń orientacyjnych.

Może coś takiego.

// 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);