0

Как добавить автоматическую прокрутку в чат ? Вот пример кода, который я думаю отвечает за показ сообщений и следовательно сюда куда-то можно воткнуть скрипт на скроллинг.

UPD: Теперь следующая проблема на скриншоте, это проблема в styles.css ? введите сюда описание изображения

<script>
    var roomName = {{ room_name_json }};
    var username = {{ username }};

    var chatSocket = new ReconnectingWebSocket(
        'ws://' + window.location.host +
        '/ws/chat/' + roomName + '/');

    chatSocket.onopen = function(e) {
      fetchMessages();
    }

    chatSocket.onmessage = function(e) {
        var data = JSON.parse(e.data);
        if (data['command'] === 'messages') {
          for (let i=0; i<data['messages'].length; i++) {
            createMessage(data['messages'][i]);
          }
        } else if (data['command'] === 'new_message'){
          createMessage(data['message']);
        }
    };

    chatSocket.onclose = function(e) {
        console.error('Chat socket closed unexpectedly');
    };

    document.querySelector('#chat-message-input').onkeyup = function(e) {
        if (e.keyCode === 13) {  // enter, return
            document.querySelector('#chat-message-submit').click();
        }
    };

    document.querySelector('#chat-message-submit').onclick = function(e) {
        var messageInputDom = document.getElementById('chat-message-input');
        var message = messageInputDom.value;
        message += ' - {{ username|slice:"1:-1" }}'
        chatSocket.send(JSON.stringify({
            'command': 'new_message',
            'message': message,
            'from': username
        }));

        messageInputDom.value = '';
    };

    function fetchMessages() {
      chatSocket.send(JSON.stringify({'command': 'fetch_messages' }));
    }

    function createMessage(data) {
      var author = data['author'];
      var msgListTag = document.createElement('li');
      var imgTag = document.createElement('img');
      var pTag = document.createElement('p');
      pTag.textContent = data.content;
      imgTag.src = 'http://emilcarlsson.se/assets/mikeross.png';
      
      if (author === username) {
        msgListTag.className = 'sent';
      } else {
        msgListTag.className = 'replies';
      }
      msgListTag.appendChild(imgTag);
      msgListTag.appendChild(pTag);
      document.querySelector('#chat-log').appendChild(msgListTag);
    }

</script>
      <div class="message-input">
        <div class="wrap">
        <input id="chat-message-input" type="text" placeholder="Введите сообщение..." />
        <i class="fa fa-paperclip attachment" aria-hidden="true"></i>
        <button id="chat-message-submit" class="submit">
          <i class="fa fa-paper-plane" aria-hidden="true"></i>
        </button>
        </div>

3
  • Попробуйте в самый конец функции createMessage написать setTimeout(()=>msgListTag.scrollIntoView(),100). 12 июн 2019 в 12:28
  • Спасибо большое, очень помогли
    – Dkato
    12 июн 2019 в 12:35
  • Если у вас возник другой вопрос, надо задавать новый вопрос. Не надо менять существующий. 12 июн 2019 в 13:01

1 ответ 1

0

Можно использовать scrollIntoView.

Можно в самый конец функции createMessage написать:

setTimeout(()=>msgListTag.scrollIntoView(),100);

setTimeout необходим, потому что надо проскроллить к элементу, когда он отрисуется.

function createMessage(data) {
      var author = data['author'];
      var msgListTag = document.createElement('li');
      var imgTag = document.createElement('img');
      var pTag = document.createElement('p');
      pTag.textContent = data.content;
      imgTag.src = 'http://emilcarlsson.se/assets/mikeross.png';

      if (author === username) {
        msgListTag.className = 'sent';
      } else {
        msgListTag.className = 'replies';
      }
      msgListTag.appendChild(imgTag);
      msgListTag.appendChild(pTag);
      document.querySelector('#chat-log').appendChild(msgListTag);
      setTimeout(()=>msgListTag.scrollIntoView(),100);
    }

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.