Блог

Я создал чат, который работает отлично. Я пытаюсь заставить свой div прокручиваться до самого низа.. Высота Div calc(100% - 60px); равна . Этот div загружает сообщения из базы данных через PHP. Я нашел здесь много вопросов, но никто не прокручивается до самого низа.

Я использовал сейчас:

 $('#allMessages').animate({
   scrollTop: $('#allMessages').get(0).scrollHeight
}, 2000);
 

Я уверен, что проблема глупая, но я действительно не знаю, как ее исправить..

Ваш пример кода действительно работает для меня. Я реализовал это так:

 const $messages = $("#messages")
  $("#scrollToBottom").click(() => {
    $messages.animate({
        scrollTop: $("#messages")[0].scrollHeight
    })
  })
 

Посмотрите на это в действии

Если у вас это не работает, проблема может быть в другом месте. Выполняете ли вы это действие перед загрузкой в него содержимого? Убедитесь, что код вызывается после того, как вы загрузили в него все.

Допустим, вы загружаете свои данные с помощью jQuery, например, с $.ajax помощью (или get и т. Д.)

Тогда это должно выглядеть примерно так:

   function scrollToBottom() {
    $messages.animate({
      scrollTop: $messages[0].scrollHeight
    })
  }


  $.ajax({
    url: 'your-data-source',
    // Some other params
    success: (data) => {
      $messages.html(data) // Replace your content somehow

      // After it has been replaced, update the scroll value
      scrollToBottom()
    }
  })
 

При наличии большого количества асинхронных операций, которые должны выполняться последовательно, уровень вложенности становится довольно глубоким. В этот момент я рекомендую посмотреть Promises API на JavaScript, который поможет вам справиться с этим.