AJAX Chat Box Scrolling Up Issue

Привет, я пишу чат-сайт, и у меня есть проблема с div, содержащим сообщения. В CSS div, содержащий сообщения, имеет overflow: auto; чтобы разрешить полосы прокрутки. Теперь проблема в том, что когда ajax извлекает сообщения через PHP-скрипт, который извлекает сообщения из базы данных, вы не можете прокрутить вверх. AJAX refreshMessages() функция настроена на обновление каждую секунду, используя window.setInterval(refreshMessages(), 1000);, Это то, что я хочу, но когда я прокручиваю вверх, чтобы увидеть предыдущие сообщения, полоса прокрутки попадает прямо вниз до конца чата из-за функции извлечения AJAX.

Есть идеи, в чем проблема?

Код AJAX:

//Fetch All Messages

var refreshMessages = function() {
$.ajax({
url: 'includes/messages.inc.php',
type: 'GET',
dataType: 'html'
})

.done(function( data ) {
$('#messages').html( data );
$('#messages').stop().animate({
scrollTop: $("#messages")[0].scrollHeight
}, 800);
})

.fail(function() {
$('#messages').prepend('Error retrieving new messages..');
});
}

РЕДАКТИРОВАТЬ:

Я использую этот код, но он не совсем работает, он приостанавливает функцию, но затем функция не перезапускается, когда полоса прокрутки возвращается к нижней части. Помогите?

//Check If Last Message Is In Focus

var restarted = 0;

var checkFocus = function() {
var container = $('.messages');
var height = container.height();
var scrollHeight = container[0].scrollHeight;
var st = container.scrollTop();
var sum = scrollHeight - height - 32;
if(st >= sum) {
console.log('focused'); //Testing Purposes
if(restarted = 0) {
window.setTimeout(refreshMessages(), 2000);
restarted = 1;
}
} else {
window.clearInterval(refreshMessages());
restarted = 0;
}
}

2

Решение

Вам необходимо заменить checkFocus() Функция возвращает true или false, а затем заставить AJAX проверить, нужно ли отправлять полосу прокрутки вниз после добавления нового сообщения или нет. Заменить checkFocus() функция с этим:

//Check If Last Message Is In Focus
var checkFocus = function() {
var container = $('.messages');
var height = container.height();
var scrollHeight = container[0].scrollHeight;
var st = container.scrollTop();
var sum = scrollHeight - height - 32;
if(st >= sum) {
return true;
} else {
return false;
}
}

Измените AJAX. Сделайте это:

.done(function( data ) {
if(checkFocus()) {
$('#messages').html( data );
scrollDownChat();
} else {
$('#messages').html( data );
}
})
2

Другие решения

Чтобы ответить на ваш вопрос о том, что происходит: интервал запускается каждую секунду, а когда вы прокрутите его в течение этого периода ожидания, он снова запустится и опустит вас на 800 пикселей. Вы можете удалить это из своей функции, чтобы сделать это.

Так как вы используете overflow: auto, ваше окно чата будет расти и создавать полосу прокрутки, когда это необходимо. Вы пытались удалить функцию прокрутки? Не движется ли он к последнему тексту внизу?

Если нет, то вы можете проверить, прокручивал ли пользователь или нет, когда пользователь прокручивал, вы не должны прокручивать, используя jQuery. Чтобы сделать это, вы можете добавить переменную вне этой функции, которая обновляется, если пользователь прокручивает ее вообще.

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

Смотрите этот вопрос для получения дополнительной информации об обнаружении прокрутки: Определить, было ли создано событие прокрутки пользователем

2

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector