如何显示追加jQuery的元素

我正在制作一个聊天应用程序，如谷歌环聊或与html，CSS和javascript snapchat。当我想追加聊天，我用如何显示追加jQuery的元素

$(id_name).after(message)

我可以附加消息，但我想知道的是，该消息并没有显示在屏幕上，而无需手动滚动。如何显示我自动附加的消息？请帮帮我。

以下是我的代码。

<div class="bubble" style="clear:both" id="talk_chat_from"> 
    <div id="talk_chat_detail"></div> 
</div>

我将消息追加到“talk_chat_detail”中。

来源

2017-09-13 Kazzz Studio

你能提供任何代码吗？你有什么尝试？ – PredatorIWD

我想，你只需要向下滚动页面底部，显示新添加的信息 –

使用scrollTop的给你追加的消息

var $target = $('#talk_chat_detail'); 
$target.animate({scrollTop: $target.prop("scrollHeight") }, 300);

来源

2017-09-13 05:55:46 madalinivascu

谢谢你的建议。但它没有奏效。 –

你是什么意思没有工作？ – madalinivascu

你可以看到一个演示：https：//plnkr.co/edit/HbPiAuOFK8804J19uy2e？p = preview – madalinivascu

$(document).ready(function() { 
 
    $('#send').click(function() { 
 
     var message = $("#message").val();//Here comes dynamic data binding 
 
     var appendMessage = '#messageArea';//Message to append in div section 
 
     $(appendMessage).append('<div style=height:10px;background:white;float:right>' + message + '</div> <br><hr>'); //user message dynamic div 
 
     var $target = $(appendMessage); // user dynamic div appended 
 
      $target.animate({ scrollTop: $target.prop("scrollHeight") }, 1000); 
 
    }) 
 
});

#messageArea { 
 
    width:320px; 
 
    height:400px; 
 
    overflow:scroll; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <input type="text" id="message" placeholder="User Message" /> 
 
    <button type="button" id="send">append text message</button> 
 
    <div id="messageArea"> 
 
     <div style="height:1000px;background-color:wheat"></div> 
 
    </div> 
 
</body>

希望后滚动到页面的底部，这有助于

来源

2017-09-13 06:44:04

解答已更新！ – 2017-09-13 06:47:28

我不明白点击事件中的最后一行，那是什么语法？ – madalinivascu

scrollTop：userMassage.prop（“scrollHeight”）; //在页面底部显示你是在说这个吗？ – 2017-09-13 06:50:37

更改$target.animate到$target.animate({ scrollTop: $target.prop("scrollHeight") }, 1000);})

这里是工作小提琴： https://jsfiddle.net/Le1by7z0/

来源

2017-09-13 06:53:55 HEGDE

你可以在jquery中使用append和animate。下面是示例代码..

<html> 

<head> 
    <link rel="stylesheet" href="style.css"> 
    <script data-require="[email protected]*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <style> 
    #test { 
     width: 200px; 
     height: 400px; 
     overflow: scroll; 
    } 

    #test div { 
     width: 200px; 
    } 
    </style> 
</head> 


<body> 
    <div class="bubble" style="clear:both" id="talk_chat_from"> 
    <div id="talk_chat_detail"></div> 
    </div> 
    <input type="text" id="message" placeholder="write message" /> 
    <input type="button" id="sendMessage" value="Send" /> 

    <script> 
    $(document).ready(function() { 
     $("#sendMessage").on('click', function() { 
     var mes = $("#message").val(); 
     $("#talk_chat_detail").append(mes + "<br/>") 
     $("#talk_chat_detail").animate({ 
      scrollTop: $target.prop("scrollHeight") 
     }, 30); 

     }); 
    }); 
    </script> 
</body> 

</html>

来源

2017-09-13 07:00:18 hsyn

您可以使用scrollTop的，你只需要你的消息的追加呼叫后立即添加下面的代码，它会自动滚动到消息，

$('html, body').animate({ 
    scrollTop: $("div").offset().top 
}, time);

div => Dom要移动滚动的元素。

time =>毫秒，定义滚动的速度。

来源

2017-09-13 07:09:18

如何显示追加jQuery的元素

回答

相关问题