Значение переполнения CSS для чата

Question

Я создаю приложение для чата, и у меня проблема с свойством переполнения, я думаю .. Я хочу, когда пользователь подключится к чату, чтобы показать ему последнее сообщение без него, чтобы прокрутить вниз до последнего message.When пользователь подключается к чату по умолчанию, он показывает первое сообщение, и пользователю приходится прокручивать вниз. мой КСС:

.chat{ 
    height: 175px; 
    width: 488px; 
    margin: 0 auto; 
    background-color: #000; 
    padding: 20px 40px; 
    border: solid 1px black; 
    overflow: auto; 
} 

Любые предложения?

Answer 1

Вы не можете сделать это чисто с помощью CSS, вы будете нужно использовать javascript.

var chatDiv = document.getElementsByClassName('chat')[0]; //I assume you only have one chat box! 
chatDiv.scrollTop = chatDiv.scrollHeight; 

Answer 2

По умолчанию overflow происходит справа или снизу. Для этого вам нужно использовать какую-то другую технику.

Можно было бы быть: Используйте обертку и поместите ваши сообщения чата абсолютно донизу:

<div id="wrapper"> 
    <div id="chat"></div> 
</div> 

С помощью CSS:

#wrapper{ 
    position: relative; 
    height: 175px; 
    width: 488px; 
    overflow: hidden; 
} 

#chat{ 
    position: absolute; 
    bottom: 0; 
}