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

272

12 декабря 2016, 10:03

Добрый день!

Сейчас делаю чатик и у меня возникла проблема. Мне нужно, чтобы при загрузке страницы 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. И еще, может кто посоветует, как лучше сделать плавный скролл. :)

Answer 1

Используйте on ready:

$(document).ready(function() {
        var $container = $('.chat');
        $container[0].scrollTop = $container[0].scrollHeight;
});

И да, всю переписку лучше сразу не загружать, а подгружать аяксом по мере прокрутки.

Answer 2

Я в своём чате добавлял проверку типа такой:

var scrollTopMax = $container[0].scrollTopMax || $container[0].scrollHeight - $container[0].clientHeight;
if(scrollTopMax - $container[0].scrollTop < 25) {
    $container[0].scrollTop = scrollTopMax;
}

http://jsfiddle.net/kkjhbbqL/