null

Прокрутка контента блока при загрузке страницы

Недавно нам понадобилось написать раздел обмена сообщениями между пользователями портала. С точки зрения вёрски это несложная задача: последовательность сообщений (блоков текста с аватаркой и временем отправления), выстроенных друг под другом. Когда сообщений становится много, появляется прокрутка. Поскольку история ведётся сверху вниз, то при появлении прокрутки самые новые сообщений оказывались внизу, то есть вне области видимости.

​​​​​​​

Решить эту проблему можно принудительно прокрутив содержимое блока. Распространённой ошибкой является попытка использования события onload применительно к div, т.к. оно определено только для ряда тегов (<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script> и <style>). Правильным подходом будет использование события ready документа или коллбэков ajax-запросов, промисов.

<html>
  <head>
    <style>
      html, body {
        background: #eee;
      }
      .conversation {
        margin: 5em auto;
        padding: 1em;
        width: 400px;
        height: 200px;
        background: #fff;
        overflow: auto;
      }
      .message {
        padding: 5px 10px;
      }
    </style>

    <script>
      $(document).ready(function () {
        var el = $(".conversation")[0];
        el.scrollTop = el.scrollHeight;
      });
    </script>
  </head>

  <body>
    <div class="conversation">
      <div class="message">- First message -</div>
      <div class="message">Test Test Test</div>
      <div class="message">Test Test Test</div>
      <div class="message">Test Test Test</div>
      <div class="message">Test Test Test</div>
      <div class="message">Test Test Test</div>
      <div class="message">Test Test Test</div>
      <div class="message">Test Test Test</div>
      <div class="message">Test Test Test</div>
      <div class="message">Test Test Test</div>
      <div class="message">Test Test Test</div>
      <div class="message">Test Test Test</div>
      <div class="message">Test Test Test</div>
      <div class="message">Test Test Test</div>
      <div class="message">Test Test Test</div>
      <div class="message">Test Test Test</div>
      <div class="message">Test Test Test</div>
      <div class="message">Test Test Test</div>
      <div class="message">- Last message -</div>
    </div>
  </body>
</html>

Живой пример