0

Estoy creando un chatbot con jquery. Quiero que al momento de mostrar los mensajes del chat, la ventana se enfoque o haga scroll al ultimo mensaje.

La ventana de chat bot html

<div class="chatter"  id="div-to-toggle"  style="display: none;">

  <div class="card chatter_convo text-dark bg-light mb-3" style="max-width: 18rem;">
      <div class="container sticky-top chat-header ">
        <span>ChatBot</span>
        <a href="#"><i id="close-btn" class="far fa-2x fa-times-circle" style="font-size: 32px !important; color:#162a67;   position: relative; float: right; transform: translateY(-5px);"></i>
        </a>
      </div>
        <div class="chatList">
            <ul>

            </ul>
        </div>
        <br>
        <span class="chatter_msg_item chatter_msg_item_admin" style="display:none" id="bienvenida">
        <a href="https://lukepeters.tech" class="chatter_avatar"><img src="https://img.lukepeters.me/avatar.jpg" /></a>
        <strong class="chatter_name">Robot</strong>Hola, soy un chatbot y estoy para ayudarte respondiendo tus dudas!</span>

        <span class="chatter_msg_item chatter_msg_item_admin" style="display:none" id="bienvenida2">
        <a href="https://lukepeters.tech" class="chatter_avatar"><img src="https://img.lukepeters.me/avatar.jpg" /></a>
        <strong class="chatter_name">Robot</strong>¿En que estás interesado? <br>
        <button type="button" id="bot1ask1" class="btn-secundary botones-chat">Tuberías</button>
        <button type="button" class="btn-secundary botones-chat">Mangueras</button>
        <button type="button" class="btn-secundary botones-chat">Otros</button>       
        </span>

El fragmento de html que he utilizado para probar el scroll es el siguiente span

<span class="chatter_msg_item chatter_msg_item_user" id="user1ask1" style="display:none">
            <a href="https://lukepeters.tech" class="chatter_avatar"><img src="http://img.lukepeters.me/jack.jpg" /></a>
            <strong class="chatter_name">Tú</strong>Quiero conocer mas sobre tuberías</span>
     
       </div>
    </div>

Y por otra parte dejo el fragmento del

$( "#bot1ask1" ).click(function() {
  $("#user1ask1").show();

Entre tantas cosas, una de ellas fue que intenté usar la API ScrollTo

    $('#user1ask1').scrollTo(100);

pero sin embargo, sigue sin funcionar. Agradezco cualquier aporte

tambien intenté esto y sigue sin funcionar

$('.chatter .card'). scrollTop( $('.chatter .card')[0]. scrollHeight );

1 respuesta 1

0

Lo he solucionado colocándolo dentro del mensaje especifico y usando una clase distinta a card .

$( "#bot1ask1" ).click( function() {
        $("#user1ask1").show();
        $('.chatter .chatter_convo').scrollTop($('.chatter .chatter_convo')[0].scrollHeight );

}); 

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.