Как DIV прокручивает в чате скрипт?

Question

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

Когда добавляется новая строка чата, полоса прокрутки не прокручивается вниз после добавления строки чата. Ее добавление в нижнюю часть слоя DIV , поскольку свиток не создает никаких помех при его создании.

Что я сделал:

До того, как я использовал javascript для прокруткивниз для каждого фиксированного интервала.При этом я не могу вручную прокрутить вверх для просмотра последних строк (из-за интервала обновления полоса прокрутки перемещается в заданное положение).Позже я написал код для javascript, который может прокручивать вниз OnClientClick, но, делая это, я могу прокрутить вниз только до Chat sender side, но он не может прокрутить вниз до Chat receiver side при добавлении новой строки чата.

Iскачал много сценариев чата и проверил, как решается эта конкретная проблема, но я не смог найти для нее решения.Я полагаю, что это работа jQuery (не уверен), кто-нибудь может сказать мне, как решить эту проблему?

Извините, если вы не поняли мою проблему, так как я не могу объяснить ее более подробно, чемкак указано выше.Однако я могу дать вам больше информации по запросу.

Я использую следующие языки: ASP.NET, панели обновления AJAX, отметки времени для обновления div новыми значениями, javascripts до сих пор используются только для прокрутки элемента вниз.

Answer 1

Экран чата должен выглядеть следующим образом:

<div id="chat">
    <div class="wrapper">
        <!-- chat messages go here -->
    </div>
</div>

Включите в чат overflow-y: auto, но оставьте упаковщик без изменений.Создайте функцию, которая запускается с интервалом, и добавьте или удалите класс «atBottom» для чата «screen» на основе значения, возвращаемого методом $ ('# chat'). ScrollTop ().

    monitor = function() {
        var $this = $(this),
            wrap = $this.find('.wrapper'),
            height = $this.height(),
            maxScroll = wrap.height() - height,
            top = $this.scrollTop();
        if (maxScroll === top) {
            $this.addClass('atBottom');
        } else {
            $this.removeClass('atBottom');
        }
    }
    window.setInterval(function() {
        monitor.call($('#chat').get(0));
    }, 350);

Тогдавам нужно связать событие addMessage, которое работает так:

    $('#chat').bind('addMessage', function(e, message) {
        var $this = $(this),
            // store whether it's at the bottom before appending the message
            scroll = $this.hasClass('atBottom');
        // then append the message
        $this.find('.wrapper').append(message);
        if (scroll) {
            // measure the new maxScroll and scroll to it.
            var wrap = $this.find('.wrapper'),
                height = $this.height(),
                maxScroll = wrap.height() - height
            $this.scrollTop(maxScroll);
        }
    })
    $('button').click(function() {
        $('#chat').trigger('addMessage', 'asdgagasdg<br/>');
    });

Вот пример: http://jsfiddle.net/WVLE2/