jqueryを追加する要素を表示するには

私はhtml、css、javascriptでGoogleハングアウトやスナップショットのようなチャットアプリケーションを作っています。私はチャットを追加したい場合は、私がjqueryを追加する要素を表示するには

$(id_name).after(message)

を使用し、私はメッセージを追加することができますが、私が知りたいのは、メッセージを手動でスクロールせずに画面上に表示されていなかったということです。自動的に追加するメッセージを表示するにはどうすればよいですか？私を助けてください。

以下はmyコードです。

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

「talk_chat_detail」にメッセージを追加します。あなたがメッセージに

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

出典

2017-09-13 Kazzz Studio

コードを入力できますか？何を試しましたか？ – PredatorIWD

新しく追加されたメッセージを表示するには、ページの下部をスクロールするだけでいいと思う。 –

使用scrollTopスプライトは、ページの一番下までスクロールし、この

出典

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

答えが更新されました！ –

私はclickイベントの最後の行を理解していませんが、どのような構文ですか？ – madalinivascu

scrollTop：userMassage.prop（ "scrollHeight"）; //ページ下部の画面に表示されますあなたはこの話をしていますか？ –

が変更に役立ちますあなたの$target.animate$target.animate({ scrollTop: $target.prop("scrollHeight") }, 1000);})

へ

はここで働いています： https://jsfiddle.net/Le1by7z0/

出典

2017-09-13 06:53:55 HEGDE

jqueryでappendとanimateを使うことができます。ここではサンプルコードでは、あなたがscrollTopスプライトを使用することができます。..

<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

である、あなたはちょうどあなたのメッセージのアペンド呼び出しの後に次のコードを追加する必要があり、それが自動的に、メッセージに

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

をスクロールしますdiv =>スクロールを移動するDOM要素。

時間=>ミリ秒、スクロールの速度を定義します。

出典

2017-09-13 07:09:18

jqueryを追加する要素を表示するには

答えて

関連する問題