0

necesito saber si hay alguna forma de con css posicionar el scroll en lo ultimo de un div que tiene varios elementos y que tiene un scroll, al cargar la vista siempre se queda al principio.

Es para un chat que carga la comunicacion completa de un par de usuarios, pero al abrila necesito ir al fondo de los mensajes, es decir, mostrar directamente los ultimos mensajes.

`

mensaje1mensaje2mensajen `
<div class="custom-class"><div>mensaje1</div> <div>mensaje2</div...  <div>mensajen</div></div>

Les adjunto una ejemplo, supongan que mas arriba todavia hay varios mensajes alli.

introducir la descripción de la imagen aquí

1 respuesta 1

0

Una forma podría ser la de añadir un id al último elemento de la lista tras cargar los elementos de la página. En el siguiente ejemplo usaremos el id="ultimo"

<div class="custom-class">
    <div>mensaje1</div>
    <div>mensaje2</div>
    <div id="ultimo">mensaje3</div>
</div>

Luego en el link que proporcionas para que las personas entren añades #ultimo al final, de la siguiente manera: https:/link#ultimo

Para hacerlo usando javascript tendrías que modificar un poco tu html, aquí te dejo el código:

html

<div id="chat">
    <div class="post">mensaje viejo</div>
    <div class="post">mensaje</div>
    <div class="post">ultimo mensaje</div>
</div>

javascript

// Elimina los id de los elementos del chat
var listaPost = document.getElementsByClassName("post")
for (i = 0; i < listaPost.length; i++) {
    listaPost[i].removeAttribute("id")
}

// Identifica el ultimo post del chat
var ultimoPost = document.getElementById("chat").lastChild
ultimoPost.id = "ultimo"

Este código debería convertir esto:

<div id="chat">
    <div class="post">mensaje viejo</div>
    <div class="post" id="ultimo">mensaje</div>
    <div class="post">ultimo mensaje</div>
</div>

En esto:

<div id="chat">
    <div class="post">mensaje viejo</div>
    <div class="post">mensaje</div>
    <div class="post" id="ultimo">ultimo mensaje</div>
</div>

Otra manera de hacer esto mismo sin necesidad de usar ningún lenguaje de programación, es la de colocar un elemento que mantenga su posición al final del chat y utilizar el id de este elemento en el link, como ya expliqué antes. En código se vería de la siguiente manera:

<div id="chat-window">
    <div id="posts">
        <div class="post">mensaje1</div>
        <div class="post">mensaje2</div>
        <div class="post" id="ultimo">mensajen</div>
        <!-- Los nuevos posts se añaden aqui -->
    </div>
    <div id="end"></div> <!-- fondo de la chat -->
</div> <!-- Aquí termina el scroll del chat -->

También puedes aplicar esta lógica a nivel de backend en tu aplicación.

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.