Estoy creando una especie de sitio web/experimento basado solo en texto sin formato, sin imágenes ni nada más, que consiste en un solo <div> que contiene varios elementos <span> y <a> que se abren al hacer clic usando JS, revelando texto que se apila en la parte inferior del <div> .
El problema viene cuando hay demasiado texto cubriendo la pantalla, y el usuario sigue haciendo clic -y por lo tanto, revelando más texto-, estas nuevas líneas, que se van apilando en la parte inferior, no son visibles automáticamente: el usuario tiene que empezar a hacer scroll hasta sigue leyendo.
¿Hay alguna manera de que pueda colocar automáticamente la parte inferior del <div> en el centro de la pantalla, de modo que no necesite desplazarse? ¿Piensa en alguna solución mejor para evitar el desplazamiento manual cuando el texto ocupa toda la pantalla?
¡Gracias!
Editar: agregué un fragmento de código para una mejor comprensión de lo que hice.
<div id="container"> <p class="fade-in"> <a data-opens="1" href="#">Hello</a>.<span data-openedby="1" class="fade-in"> How are <a data-opens="2" href="#">you</a>? </span><span class="fade-in" data-openedby="2"><a data-opens="3" href="#">Welcome</a> to my website.</span> </p> </div> Básicamente, este fragmento de código, pero en lugar de solo tres <a> , tiene hasta ahora 300 de ellos con sus respectivos <span> .
¿Qué pasa con algo como esto:
CSS:
button { position: relative; z-index: 10; } div { position: fixed; bottom: 50%; }HTML:
<button>Click me!</button> <div> <span>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span><br><br> </div>jQuery:
var counter = 1; // to help distinguish new content $('button').on('click', function(){ $('div').append('<span>' + counter + '. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span><br><br>'); });JSFiddle .
Si entiendo su pregunta correctamente, no desea cambiar la parte inferior del cuadro <div> sino hacer que se desplace automáticamente hasta la parte inferior del contenido.
Eso se puede hacer haciendo que el div de contenido sea un solo elemento secundario de un contenedor flexible invertido y aplicando el desplazamiento al contenedor. Aquí hay un ejemplo:
HTML
<div class="bottom-oriented"> <div id="content"> <div>Top</div> </div> </div>CSS
.bottom-oriented { max-height: 100px; overflow: auto; display: flex; flex-direction: column-reverse; } #content { border: 1px solid; }JS para demostrar el comportamiento
var parent = document.getElementById("content"), i = 0; window.setInterval(function () { var newEl = document.createElement("div"); i++; newEl.textContent = "Text " + i; parent.append(newEl); }, 3000);