Прокрутите чат автоматически - PullRequest
Новая
       19

Прокрутите чат автоматически

0 голосов
/ 30 октября 2019

Я бы хотел добавить чат на свой сайт, используя модуль NodeJS и socket.io. Мне просто нужно исправить небольшую проблему, которая заключается в автоматической прокрутке полосы прокрутки вниз, когда сообщения переполняют окно, в котором они находятся, чтобы пользователю не приходилось делать это вручную каждый раз, когда появляется новое сообщение. Я пытался использовать Javascript, но у меня не получилось, хотя я пробовал разные вещи.

Вот как это выглядит без каких-либо сообщений:

чат без сообщений

Вот как это выглядит при заполнении коробки:

чат заполнен 

</!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/stylesal.css" />
        <title>Les réseaux informatiques :)</title>
    </head>
    <body>
        <script src="/socket.io/socket.io.js"></script>
        <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
        <script src="js/scroll.js"></script>
        <script>
            $(function () {
              var socket = io();
              $('form').submit(function(e){
                e.preventDefault(); // prevents page reloading
                socket.emit('chat message', $('#m').val());
                $('#m').val('');
                return false;
              });
              socket.on('chat message', function(msg){
                $('#messages').append($('<li>').text(msg));
              });
            });
        </script>
        <div class="submain">
            <div class="console">
                console
            </div>
            <div class="jeu">
                <div class="chrono">
                    chrono
                </div>
                <div class="cercle">
                    cercle
                </div>
            </div>
        </div>
        <div id="chat">
            <ul id="messages"></ul>
            <form action="">
                <input id="m" autocomplete="off" /><button>Post</button>
            </form>
        </div>
    </body>

Код CSS: 

#chat
{
  background-color: white;
  height: calc(100vh - 40px);
  background-color: ;
  border: 2px solid green;
  overflow: auto;
  width: 23%;
  border-top: none;
}
 form 
{ 
background: #000; padding: 3px; 
position: fixed; bottom: -20; right: 0; 
width: 23%;
 }

 form input 
 { 
    border: 0; padding: 10px; width: 83%; margin: 0;
 }

 form button { width: 17%;  background: lightgreen; border: none; padding: 10px; }

#messages { list-style-type: none; padding: 0; margin-top: 0px; margin-bottom: 0;}
#messages li { padding: 5px 10px; background: rgb(188, 223, 250);}
#messages li:nth-child(odd) { background: rgb(128, 194, 243);}`

JS код: 

var chat = document.getElementById('chat');
alert('start ok');
while(1)
{
alert('entreesuccess');
if(chat.scrollHeight > chat.clientHeight)
{
   alert('True0');
chat.scrollBy({
    top: 40,
    left: 0,
    behavior: 'smooth'
    });
 }
}

Как вы можете видеть, то, что я пытался сделать, постоянно проверяет разницу между scrollheight и clientheight для div "chat". Таким образом, если у нас возникает ситуация прокрутки (например, появляется переполнение, полоса прокрутки), элемент перемещается на 40 пикселей снизу, что приблизительно соответствует высоте сообщения. Пока что Alert('true0') даже не появляется, что означает, что я даже не могу войти в условие. Только два предупреждения перед работой.

Я также пробовал использовать функции: 

var chat = document.getElementById('chat');

function isOverflown(element) {
    return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;                            
}

while(1)
{
function scroll()
{
    if(isOverflown(chat))
    {
        chat.scrollBy({
        top: 40,
        left: 0,
       behavior: 'smooth'
    });
 }  
}
}
...