Автоматически прокручивать чат div

у меня есть этот код, чтобы загрузить чат

    function getMessages(letter) {
    var div = $("#messages");
    $.get('msg_show.php', function(data) {
        div.html(data);   
    });
}

setInterval(getMessages, 100);

что я должен добавить, чтобы автоматически прокручивать вниз #messages div при загрузке страницы и снова с каждым новым сообщением чата?

это не работает:

    function getMessages(letter) {
    var div = $("#messages");
    $.get('msg_show.php', function(data) {
        div.html(data);
        $('#messages').scrollTop($('#messages')[0].scrollHeight);
    });
}

setInterval(getMessages, 100);
11
chat javascript jquery scroll

9 ответов

давайте сначала рассмотрим несколько полезных концепций прокрутки:

  • scrollHeight: общий размер контейнера.
  • scrollTop: количество прокрутки пользователя сделано.
  • clientHeight: количество контейнера, которое видит пользователь.

когда вы выделите?

  • пользователь загрузил сообщения в первый раз.
  • новые сообщения прибыли, и вы в нижней части свитка (вы не хотите, чтобы заставить прокрутки, когда пользователь прокручивает вверх, чтобы прочитать предыдущие сообщения).

программно, то есть:

if (firstTime) {
  container.scrollTop = container.scrollHeight;
  firstTime = false;
} else if (container.scrollTop + container.clientHeight === container.scrollHeight) {
  container.scrollTop = container.scrollHeight;
}

полный симулятор чата (с JavaScript):

https://jsfiddle.net/apvtL9xa/

const messages = document.getElementById('messages');

function appendMessage() {
	const message = document.getElementsByClassName('message')[0];
  const newMessage = message.cloneNode(true);
  messages.appendChild(newMessage);
}

function getMessages() {
	// Prior to getting your messages.
  shouldScroll = messages.scrollTop + messages.clientHeight === messages.scrollHeight;
  /*
   * Get your messages, we'll just simulate it by appending a new one syncronously.
   */
  appendMessage();
  // After getting your messages.
  if (!shouldScroll) {
    scrollToBottom();
  }
}

function scrollToBottom() {
  messages.scrollTop = messages.scrollHeight;
}

scrollToBottom();

setInterval(getMessages, 100);
#messages {
  height: 200px;
  overflow-y: auto;
}
<div id="messages">
  <div class="message">
    Hello world
  </div>
</div>
22

трудно сказать, не зная HTML-код, но я бы предположил, что ваш div не имеет набора высоты и / или не допускает переполнения (например, через CSS height: 200px; overflow: auto).

Я сделал рабочий образец на jsfiddle:http://jsfiddle.net/hu4zqq4x/

Я создал некоторую фиктивную HTML-разметку внутри div, которая a) переполнена и b) имеет заданную высоту. Прокрутка осуществляется путем вызова функции

function getMessages(letter) {
    var div = $("#messages");
    div.scrollTop(div.prop('scrollHeight'));
}

в этом случае после того, как на 'documentReady'.

prop('scrollHeight') будет иметь доступ к значению свойства на первом элементе в наборе сопоставленных элементов.

7

что вам нужно сделать, это разделить его на два ДИВС. Одно с переливом набор для прокрутки, так и внутренние, чтобы вместить текст, так что вы можете сделать это outersize. 

<div id="chatdiv">
    <div id="textdiv"/>
</div>

textdiv.html("");
$.each(chatMessages, function (i, e) {
    textdiv.append("<span>" + e + "</span><br/>");
});
chatdiv.scrollTop(textdiv.outerHeight());

вы можете проверить jsfiddle здесь:http://jsfiddle.net/xj5c3jcn/1/

очевидно, что вы не хотите каждый раз перестраивать весь текст div, поэтому возьмите это с солью - просто пример.

1
    var l = document.getElementsByClassName("chatMessages").length;
    document.getElementsByClassName("chatMessages")[l-1].scrollIntoView();

это должно работать

1

не нужно смешивать jQuery и JavaScript. Используйте вот так,

function getMessages(letter) {
    var message=$('#messages');
    $.get('msg_show.php', function(data) {
        message.html(data);
        message.scrollTop(message[0].scrollHeight);
    });
}

setInterval(function() {
    getMessages("letter");
}, 100)

поставить scrollTop() внутри get() метод.

также вы пропустили параметр getMessage вызов метода..

0

это сработало для меня попробуйте это, дайте мне знать, если какие-либо сомнения,

setInterval(function () {
    $("#messages").load("msg_show.php");

   $("#messages").animate({
        scrollTop: $("#messages")[0].scrollHeight}, -500);

}, 1000);
0

я узнал этот очень простой метод во время экспериментов: установите scrollTo на высоту div.

var myDiv = document.getElementById("myDiv");
window.scrollTo(0, myDiv.innerHeight);
0

после добавления в JQuery просто добавьте эту строку

<script>
    $("#messages").animate({ scrollTop: 20000000 }, "slow");
</script>
0

Если вы просто прокрутите его, это создаст проблему, когда пользователь захочет увидеть свое предыдущее сообщение. поэтому вам нужно сделать что-то, чтобы при новом сообщении приходил только тогда код. используйте последнюю версию jquery. 1.здесь я проверил высоту перед загрузкой сообщения. 2. еще раз проверьте новую высоту. 3. если высота отличается только в это время, она будет прокручиваться, иначе она не будет прокручиваться. 4. не в состоянии if вы можете поставить любой рингтон или любую другую функцию, которая вам нужна. что будет играть, когда новый сообщение придет. спасибо

var oldscrollHeight = $("#messages").prop("scrollHeight");
$.get('msg_show.php', function(data) {
    div.html(data);
    var newscrollHeight = $("#messages").prop("scrollHeight"); //Scroll height after the request
    if (newscrollHeight > oldscrollHeight) {
        $("#messages").animate({
            scrollTop: newscrollHeight
        }, 'normal'); //Autoscroll to bottom of div
    }
0