Привет, я пишу чат-сайт, и у меня проблема с div, содержащим сообщения. В CSS div, содержащий сообщения, имеет overflow: auto; чтобы разрешить полосы прокрутки. Теперь проблема в том, что ajax извлекает сообщения через PHP-скрипт, который извлекает сообщения из базы данных, вы не можете прокручивать вверх. Функция refreshMessages() AJAX устанавливается для обновления каждую секунду с помощью 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; } }
Вам нужно заменить 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:
.done(function( data ) { if(checkFocus()) { $('#messages').html( data ); scrollDownChat(); } else { $('#messages').html( data ); } })
Чтобы ответить на ваш вопрос о том, что происходит: интервал проходит каждую секунду, и когда вы прокручиваете его в течение этого периода ожидания, он снова запустится и переместит вас на 800 пикселей. Вы можете удалить это из своей функции, чтобы сделать это.
Так как вы используете overflow: auto , ваше окно чата будет расти и при необходимости создаст полосу прокрутки. Вы пытались удалить функциональность прокрутки? Не подходит ли он к последнему тексту внизу?
Если нет, то вы можете проверить, прокручивается ли пользователь или нет, когда пользователь прокручивается, вам не нужно прокручивать с помощью jQuery. Для этого вы можете добавить переменную вне этой функции, которая обновляется, если пользователь вообще прокручивается.
Обнаружение прокрутки пользователя и прокрутки javascript нелегко, поэтому вы можете использовать, какие сообщения (ы) просматриваются. Если сообщение в фокусе – последнее сообщение, вы должны продолжать прокручивать его вниз, но когда последнее сообщение выходит из поля зрения, вы можете предположить, что пользователь прокрутил.
См. Этот вопрос для получения дополнительной информации об обнаружении прокрутки. Определите, было ли создано событие прокрутки пользователем.