如何在消息到来时自动向下滚动到列表

Question

Hello Everybody我有一个div，其中列出了set "sourcefolder=C:\MyFolder" if not exist "%sourcefolder%" set "sourcefolder=D:\MyFolder" if not exist "%sourcefolder%" set "sourcefolder=E:\MyFolder" if not exist "%sourcefolder%" ( echo Could not find a valid source folder. exit /B ) xcopy /E /I /Y "%sourcefolder%" "V:\Save\" 的消息，这里是代码;

<ul>

脚本;

  <section class="portfolio-section masonry-style">
    <div class="container">
        <h2>TOPLU KONUŞMA</h2>
        <div class="container" style="max-height:500px;min-height:500px;overflow-y: scroll;overflow-x: hidden;">
            <br />
            <input type="hidden" id="displayname" />
            <ul id="discussion"></ul>
        </div>
        </div>  

</section>
<div class="container">
    <div class="container">
        <div id="contact-form">
            <textarea name="comment" id="message" placeholder="Mesajınız"></textarea>
            <div class="submit-area">
                <input type="submit" id="sendmessage" value="Gönder">
                </div>
            </div>
    </div>
    </div>

所以正如你所看到的那样，在消息传出时它不会自动向下滚动。这是实时聊天。那么如何在消息来临时自动滚动

Answer 1

首先，为以下行添加id。如果您没有div的ID，则Jquery无法选择正确的div，因为您有多个div.container。

<div class="container" style="max-height:500px;min-height:500px;overflow-y: scroll;overflow-x: hidden;" id="messageContainer">

然后使用jquery通过以下代码滚动div：

$('div#messageContainer').scrollTop($('div#messageContainer')[0].scrollHeight)

放置代码

（1）在您的新消息被追加之后

$('#discussion').append('<li><strong>' + htmlEncode(name) + '</strong>: ' + htmlEncode(message) + '</li>');

或

（2）清除输入框后。

$('#message').val('').focus();