Автоматически прокручивать чат 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);

Ответы

Ответ 1

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

  • 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>

Ответ 2

Трудно сказать, не зная код 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') получит доступ к значению свойства для первого элемента в наборе согласованных элементов.

Ответ 3

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

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

Ответ 4

Что вам нужно сделать, так это разделить его на два div. Один с переполнением, установленным для прокрутки, и внутренний, чтобы удерживать текст, чтобы вы могли его получить.

<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, поэтому возьмите это с солью - просто пример.

Ответ 5

Не нужно смешивать 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..

Ответ 6

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

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

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

}, 1000);

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

если вы просто прокрутите высоту, это создаст проблему, когда пользователь захочет увидеть свое предыдущее сообщение. поэтому нужно сделать что-то, что при появлении нового сообщения только потом код. используйте последнюю версию 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
    }

Ответ 10

Как я не мастер в JS, но я сам пишу код, который проверяет, если пользователь внизу. Если пользователь внизу страницы чата автоматически прокрутится с новым сообщением. и если пользователь прокручивает вверх, то страница не будет автоматически прокручиваться вниз.

Код JS -

var checkbottom;
jQuery(function($) {
$('.chat_screen').on('scroll', function() {
    var check = $(this).scrollTop() + $(this).innerHeight() >= $(this) 
[0].scrollHeight;
    if(check) {
       checkbottom = "bottom";
    }
    else {
    checkbottom = "nobottom";
    }
})
});
window.setInterval(function(){
if (checkbottom=="bottom") {
var objDiv = document.getElementById("chat_con");
objDiv.scrollTop = objDiv.scrollHeight;
}
}, 500);

HTML-код -

<div id="chat_con" class="chat_screen">
</div>

Ответ 11

для прокрутки до определенного элемента из верхней части окна сообщения оформите следующую демонстрацию:

https://jsfiddle.net/6smajv0t/

function scrollToBottom(){
	const messages = document.getElementById('messages');
	const messagesid = document.getElementById('messagesid');  
	messages.scrollTop = messagesid.offsetTop - 10;
}

scrollToBottom();
setInterval(scrollToBottom, 1000);
#messages {
  height: 200px;
  overflow-y: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messages">
  <div class="message">
    Hello world1
  </div>
  <div class="message">
    Hello world2
  </div>
  <div class="message">
    Hello world3
  </div>
  <div class="message">
    Hello world4
  </div>
  <div class="message">
    Hello world5
  </div>
  <div class="message">
    Hello world7
  </div>
  <div class="message">
    Hello world8
  </div>
  <div class="message">
    Hello world9
  </div>
  <div class="message" >
    Hello world10
  </div>
  <div class="message">
    Hello world11
  </div>
  <div class="message">
    Hello world12
  </div>
  <div class="message">
    Hello world13
  </div>
  <div class="message">
    Hello world14
  </div>
  <div class="message">
    Hello world15
  </div>
  <div class="message" id="messagesid">
    Hello world16 here
  </div>
  <div class="message">
    Hello world17
  </div>
  <div class="message">
    Hello world18
  </div>
  <div class="message">
    Hello world19
  </div>
  <div class="message">
    Hello world20
  </div>
  <div class="message">
    Hello world21
  </div>
  <div class="message">
    Hello world22
  </div>
  <div class="message">
    Hello world23
  </div>
  <div class="message">
    Hello world24
  </div>
  <div class="message">
    Hello world25
  </div>
  <div class="message">
    Hello world26
  </div>
  <div class="message">
    Hello world27
  </div>
  <div class="message">
    Hello world28
  </div>
  <div class="message">
    Hello world29
  </div>
  <div class="message">
    Hello world30
  </div>
</div>