Выровнять текст по низу, как это происходит во время чата? - PullRequest
Новая
       6

Выровнять текст по низу, как это происходит во время чата?

4 голосов
/ 09 июня 2010

Я создаю специальное приложение для веб-чата, и хотя у меня есть основы, я хотел бы знать, возможно ли это ... прямо сейчас, чат вступает в верхней части div, и когда он достигает дна, div начинает прокручивать. Это работает. Это замечательно. Но мне было интересно, можно ли было создать его более похожим на IRC-клиента, где чат сначала входит в низ div, затем каждая новая строка идет ниже старых и т. Д., И снова, когда div заполнен, он начинает прокручиваться.

Мне удалось получить часть этой работы: я могу заставить это отображаться таким образом. Но я не могу найти способ прокрутить его; либо прокрутка не появляется (если на внутреннем, текстовом div нет переполнения, несмотря на переполнение на внешнем элементе div контейнера), либо она ограничена шириной текста, а не шириной контейнера div.

Некоторые варианты, которые я пробовал: 

<div id="chatbox" style="overflow: auto; position: relative; width: 100%; height: 400px;">
<div id="chatmessages" style="overflow: auto; position: absolute; bottom: 0;"></div></div>

Здесь текст правильно отображается внизу, но полоса прокрутки не отображается. 

<div id="chatbox" style="overflow: auto; position: relative; width: 100%; height: 400px;">
<div id="chatmessages" style="overflow: scroll; position: absolute; bottom: 0;"></div></div>

При этом текст должным образом отображается внизу, и появляется полоса прокрутки, но ее ширина равна ширине текста, даже если ширина = 100% ... и когда текст достигает вершины, полоса прокрутки остается серой.

По сути, я хочу, чтобы полоса прокрутки на внутреннем элементе или в контейнере div была ли это вообще возможной, как заставить ее работать, и я делаю это совершенно неправильно?

Ответы [ 3 ]

5 голосов
/ 09 июня 2010

Полосы прокрутки не срабатывают, потому что chatmessages просто становится выше.

Используйте эти стили: 

    #chatbox
    {
        overflow:   none;
        position:   relative;
        width:      100%;
        height:     400px;
    }
    #chatmessages
    {
        overflow:   auto;
        position:   absolute;
        bottom:     0;
        max-height: 400px;
    }
2 голосов
/ 01 августа 2016

Я придумал решение, не требующее JavaScript, а значит, оно работает быстрее. При прокрутке чата до дна нужно следить за многими переменными, например, изображениями, которые загружаются и изменяют высоту прокрутки.

В моем предложенном решении чат вращается на 180 градусов в прокручиваемой оболочке. Внутри оболочки у вас есть еще один div, который поворачивается на 180 градусов. Таким образом, внутренний div плавно переходит на дно, даже когда появляются новые сообщения. 

<div id="chat_wrap" class="scrollable" style="transform-origin: 50% 50%; transform: rotate(180deg);" onscroll="reverseScroll()">
   <div id="messages_wrap" style="float: left;width: 100%; transform: rotate(180deg);">
      <div class="message">Your message</div>
   </div>
</div>

Примечание: мой div "chat_wrap" имеет абсолютную позицию с верхним / нижним / левым / правым значением, установленным так, как он должен.

2 голосов
/ 14 июля 2015

Используйте этот jquery для прокрутки вниз, поэтому он всегда будет отображать последнее сообщение: 

$('#chatmessages').scrollTop($('#chatmessages')[0].scrollHeight);

Для #chatmessages используйте width: 100% и max-height, такие же, как высота #chatbox 

#chatbox {
    overflow:   none;
    position:   relative;
    width:      100%;
    height:     200px;
    border:     1px solid #ccc;
}
#chatmessages
{
    overflow:   auto;
    position:   absolute;
    bottom:     0;
    width:      100%;
    max-height: 200px;
}

Я создал эти скрипки с примерами текстовых сообщений:

jsfiddle with scroll

jsfiddle без прокрутки

...