Я создал простое приложение для чата. Я использовал setTimeout для обновления сообщений каждые 0,5 мс и scrolltop, чтобы сохранить полосу прокрутки внизу. Но проблема в том, что can not прокручивает сообщение div.
<?php session_start(); ?> <html> <head> <title>Live Table Data Edit</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> </head> <body> <div class="container"> <br /> <br /> <br /> <div class="table-responsive"> <h3 align="center">You Are : <?php echo $_SESSION['name']; ?></h3><br /> <div id="live_data"></div> </div> <div id="messages" style=" border: 1px solid #ccc; width: 350px; height: 210px; padding: 10px; overflow-y:scroll; display:none;"></div> <div class="area" style="display:none"> <textarea id="text" name="text"style=" border: 1px solid #ccc; width: 350px; height: 50px; padding: 10px;" ></textarea> <input type="submit" id="sub" name="sub" value="Send" /> </div> </div> <script> var currentID = null; var chatTimer = null; function fetch_data() { $.ajax({ url: "select.php", method: "POST", success: function(data) { $('#live_data').html(data); //fetch_chat(); } }); } function fetch_chat() { $.ajax({ url: "fetch_chat.php", method: "POST", data: { id: currentID }, dataType: "text", success: function(data) { $("#messages").show(); $('#messages').html(data); $("div.area").show(); $("#messages").animate({ scrollTop: $(document).height() }, "fast"); return false; chatTimer = setTimeout(fetch_chat, 500); //request the chat again in 2 seconds time } }); } $(document).ready(function() { $(document).on('click', '.first_name', function() { currentID = $(this).data("id1"); //immediately fetch chat for the new ID, and clear any waiting fetch timer that might be pending clearTimeout(chatTimer); fetch_chat(); }); $("#sub").click(function() { var text = $("#text").val(); $.post('insert_chat.php', { id: currentID, msg: text }, function(data) { $("#messages").append(data); $("#text").val(''); }); }); fetch_data();//this will also trigger the first fetch_chat once it completes }); </script> </body> </html> когда я устанавливаю setTimeout ниже scrolltop, возвращаемый false оператор останавливает выполнение, но затем я могу прокручивать вверх.