Скролл с конца div

Рейтинг: 0Ответов: 2Опубликовано: 18.04.2015

Добрый день!

Сейчас делаю чатик и у меня возникла проблема. Мне нужно, чтобы при загрузке страницы div .chat показывался с конца. Т.е. последние сообщения были видны, а те, что были раньше можно было посмотреть с помощью скролла. В общем почти получилось ) Но! Теперь когда хочу посмотреть старые сообщения, он автоматически спускает вниз с тем же интервалом. Посоветуйте, пожалуйста, как оставить, чтобы и начиналось с конца, и давало возможность прокрутки к более ранним сообщениям. Спасибо.

<script>
    $(function() {
        setInterval(function() {
            var $container = $('.chat');
            $('<div class="message"></div>')
             // .appendTo($container);
            $container[0].scrollTop = $container[0].scrollHeight;
        }, 1000);
    });
</script>

.chat {
    width: 760px;
    height: 210px;
    background-color: rgb(226, 226, 226);
    overflow-y: auto;
}
#note {
    padding-top: 10px;
    text-align: center;
    font-size: 14px;
    font-family: "Helvetica", sans-serif;
}
.message {
    text-align: left;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 100%;
    overflow: hidden;
    font-size: 14px;
    font-family: "Helvetica", sans-serif;
}
.income {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 13px;
    margin-left: 40px;
    max-width: 50%;
    background-image: url(images/income.png);
    background-repeat: no-repeat;
    background-position: 20px 98%;
    float: left;
}
.income > p {
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
}
.send {
    padding-left: 15px;
    padding-bottom: 13px;
    padding-right: 15px;
    margin-right: 40px;
    max-width: 50%;
    background-image: url(images/send.png);
    background-repeat: no-repeat;
    background-position: 90% 98%;
    float: right;
}
.send > p {
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    background-color: rgb(41, 167, 222);
    border-radius: 10px;
    color: rgb(255, 255, 255);
}
::-webkit-scrollbar {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="chat">
    <div id="note">
        <p>Start the conversation by typing something welcoming :-)</p>
    </div>
    <div class="message">
        <div class="send">
            <p>Hi, Tanya! How are you?</p>
        </div>
    </div>

    <div class="message">
        <div class="income">
            <p>Hi, What's up, Chuck?</p>
        </div>
    </div>
    <div class="message">
        <div class="income">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
</div>

P.S. И еще, может кто посоветует, как лучше сделать плавный скролл. :)

Источник: Stack Overflow на русском

Скролл с конца div

Ответы