Skip to main content
se añadieron 662 caracteres en el cuerpo
Origen Enlace
Ariel Montes
  • 2.4k
  • 1
  • 10
  • 30

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.

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>

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

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.

se añadieron 1134 caracteres en el cuerpo; se añadieron 3 caracteres en el cuerpo
Origen Enlace
Ariel Montes
  • 2.4k
  • 1
  • 10
  • 30

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>

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

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

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>

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

Origen Enlace
Ariel Montes
  • 2.4k
  • 1
  • 10
  • 30

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