Question

我想使用NodeJS和socket.io模块将聊天集成到我的网站。我只需要解决一个小问题，当消息溢出其所在的框时，滚动条会自动滚动到底部，这样用户不必在每次出现新消息时手动进行操作。我曾经尝试使用Javascript，但是即使尝试了不同的尝试，我也无法成功。

这是没有任何消息的样子：

chat without msg

这是装满盒子的样子：

chat full

</!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'
    });
 }
}

正如您所看到的，我已经尝试做的是，持续测试“聊天” div的scrollheight和clientheight之间的差异。因此，如果存在滚动情况（因此会出现溢出，出现滚动条），则元素会将底部移动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'
    });
 }  
}
}

自动向下滚动聊天

0 个答案: