HTML/Javascript: reparación de la posición de desplazamiento después de la rotación de la pantalla

Question

¿Cuál es la mejor manera de restaurar la posición de desplazamiento en un documento HTML después de que se ha girado la pantalla? (Esto está en Cocoa Touch UIWebView, pero creo que es un problema en todas partes). El comportamiento predeterminado parece restaurar el desplazamiento y en píxeles, pero como el texto ha sido refluido, ahora se trata de una posición diferente en el documento.

Mi idea inicial es:

1. Pepper el documento con los elementos invisibles, id'ed única.
2. Antes de la rotación, busque el elemento e cuyo desplazamiento y está más cerca del desplazamiento de desplazamiento.
3. Después de la rotación, actualice el desplazamiento de desplazamiento a e 's nuevo y-offset.

Incluso si eso funciona, preferiría no insertar un montón de crud en el documento. ¿Hay una mejor manera?

---

Aquí hay un diagrama para aclarar el problema. Restaurar el original y-offset no produce el resultado esperado porque más texto encaja en una línea en modo horizontal.

Answer 1

No es bonita, pero funciona. Esto requiere que haya etiquetas de tramo en todo el texto del documento.

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

Después de la rotación, document.getElementById(spanId).offsetTop es el nuevo-y offset, donde spanId es el resultado de findClosestLocator() antes de la rotación.

Answer 2

Conceptualmente, el problema no es tan difícil de pensar. Tiene eventos de desplazamiento, eventos de rotación y variables. Seguiría la posición scrollTop en el nodo document.body DOM en el evento scroll. Vuelva a aplicarlo con los incendios de evento de orientación.

Algo como esto quizás.

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