0

Tengo un html que representa lo que sería el anverso y reverso de una tarjeta física. En un primer momento, se muestra el div id="anverso" que contiene todo lo que hay en el anverso de la tarjeta (una pregunta) y, al darle a mostrar respuesta, vemos de nuevo el anverso y, separado por una etiqueta hr, el contenido div id="reverso" de la tarjeta, es decir, la respuesta a la pregunta. Incluyo el anverso para que se pueda consultar cuál era la pregunta, ya que en formato web sería más incómodo tener que pulsar atrás o algo similar y, como lo he construido, eso no funcionaría.

El problema es que, al cargar esa segunda página en la que se muestra el anverso, el hr y el reverso, si aparece una barra de scroll vertical porque anverso y/o reverso tienen imágenes o mucho texto, la barra de scroll aparece en la parte superior de la página, cuando lo idóneo sería que apareciera a la altura del div id="reverso".

Hasta ahora, he probado todo esto, tanto por separado como a la vez, y nada funciona con eficacia:


    document.getElementById("anverso").style.display = "none";
    document.getElementById("anverso").style.display = "inline";
    
    document.getElementById("reverso").scrollIntoView(true);
    
    window.scrollBy(0, document.body.clientHeight);
    window.scrollBy(0, document.getElementById("reverso").getBoundingClientRect().y);   
    
    function posInicial () { document.location.hash = "anverso";    document.location.hash = "reverso"; }
    posInicial();

Todo lo que uso es HTML y Javascript, nada de jQuery.

1 respuesta 1

1

No estoy del todo haber comprendido, pero mira, te doy dos posibles soluciones.

  1. Si quieres saber en que punto se encuentra el div "reverso" entonces tienes este pequeño código:

window.addEventListener("load",() => {
    window.addEventListener("scroll", () => {
      let windowBottom = window.pageYOffset + window.innerHeight;
      document.querySelectorAll("#reverso").forEach(el => {
        let objectBottom = el.offsetTop + el.offsetHeight;
        if (objectBottom < windowBottom) {
            console.log("El scroll está en reverso")
            console.log(windowBottom)
        } else {
            console.log("El scroll no está en reverso")
            console.log(windowBottom)
        }
      });
    })
});

Que muestra en consola cuando el Scroll está a la altura del div "reverso" y la altura en la que se encuentra.

  1. Creo que esta es la más acertada, si lo que quieres es solamente que al cargar la página te aparezca por default la altura de tu página en el div "reverso" puedes solamente especificarlo en la URL:

    https://paginaweb.com/index.html#reverso

  2. Creo que esta si te servirá(eso espero):

HTML y JS:

//Almaceno el div "reverso" en la variable "elem"
var elem = document.querySelector('#reverso');
//Utilizo el método "getBoundingClientRect" que me devuelve la posición de la variable "elem"
var rect = elem.getBoundingClientRect();
//Imprimo en consola lo que me devuelve "rect"
console.log(rect)
//Le ordeno a la página que el scroll sea de x=0 e y=a la cantidad en pixeles que tengo en "rect"
scroll(0, rect.y);
<div style="margin-top:1000vh; margin-bottom: 100vh;" id="reverso">
  Aquí la respuesta de la pregunta, reverso.
</div>

El style del div es solo para que se pudiera visualizar mejor el resultado.

Y con eso estaría. Espero te ayude.

2
  • Gracias por responder @LB17. No expliqué que no estoy usando una aplicación para estudiar tarjetas que se llama Anki y que admite HTML y Javascript pero tiene restricciones, no sé exactamente cuantas, pero sí algunas como que no existen las URl (o quizás internamente sí, pero no sé cuáles podrían ser). De manera que no puedo utilizar el segundo método y el primero tampoco me funciona. Preguntar aquí ha sido mi último recurso después de investigar e investigar. Con el código que puse, a veces funciona y a veces no, pero desconozco por qué en algunos caso sí y en otros no.
    – Pip
    el 16 abr. 2022 a las 14:58
  • Vale, intenta con el código que acabo de agregar. Si te funciona me dices.
    – LB17
    el 16 abr. 2022 a las 17:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.