2

Здравсвуйте, хочу сделать чат с загрузкой прошлых диалогов на подобии ВКонтакте, чтобы прошлые диалоги загружались при прокрутки скрола вверх до упора. Есть чат, вот его НТМЛ код (схематично):

<h2>Чат</h2>
<div class="Chat">
<div class="dial"> Текст начало ... конец </div>
<div id ='scroll-id' class="dial"> Текст начало ... конец</div>
<div class="dial"> Текст начало ... конец</div>
<div class="dial"> Текст начало ... конец</div>
</div>

В выделены под чат блок, все диалоги не влазят

height:500px;
overflow: auto;

Требуется, чтобы скрол в начале был внизу. А при достижении верха прокрутки добавляет элементы с классном .ajax-exmpl и переносит скрол на диалог с #scroll-id.

Вот что я попытался сделать сам:

//Тут я задал 500 это произвольная максимальная величина, чтобы скрол опустить вниз
$(".dialogue").scrollTop(500);

//Загрузку блока ajax-exmpl тоже получилось сделать
var mz=$(".ajax-exmpl");
$('.dialogue').scroll(function(){
    if ($(".dialogue").scrollTop() == 0){
        mz.clone().prependTo(".dialogue") .show("slow"); //вставляем в блок dialogue

    //Вот теперь сама проблема. я беру позицию '#scroll-id', но относительно верха монитора, а нужна позиция относительно блока .dialogue .
        $chScrollPositions =  $('#scroll-id').offset().top;
        $(".dialogue").scrollTo('#scroll-id');  alert($chScrollPositions);

    }

Функуцию "scrollTo" взял тут: https://github.com/flesler/jquery.scrollTo но она не сильно помогает :)

1
  • Апну, тоже интересует
    – Bastian
    7 авг 2014 в 15:54

1 ответ 1

3

Вы показали схематично свою html-структуру, поэтому, чтоб особо не разбираться где у вас ".dialogue", ".ajax-exmpl" и прочее, я вам набросал свой примерчик и со своей структурой. За исключением того, что данные в ajax-запросе принимаются те же, что и отсылаются, он вполне себе рабочий. Тестируем это дело, задаём вопросы, если чего не ясно.

UPD Вариант с прокруткой снизу верх.

3
  • Спасибо в проблеме разобрался. Не совсем корректно сделал CMS. Но теперь появилась другая проблема: jsfiddle.net/cyjrr1tg/14 я сделал красивый скролл, и он связан с полосой прокрутки, но запроса не происходит и сообщания alert('dd') не выводится. Функционал для дизайна скрола взял тут: jscrollpane.kelvinluck.com . Как только устанавливаем высоту #contentcontainer { height: 300px;} вот что получается jsfiddle.net/cyjrr1tg/13 , Теперь сообщение выводиться alert('dd'), что и требуется, но теперь у нас два не связаных скролла. 10 авг 2014 в 0:42
  • @Максим147, класс "scroll-pane" убираете из того div-а, в котором он сейчас и устанавливаете в div с "id=contentcontainer".
    – Deonis
    10 авг 2014 в 0:58
  • не получилось, можете отправить пример? jsfiddle.net/cyjrr1tg/16 10 авг 2014 в 17:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.