Язык
Контакты
GitHub
Поддержка
Регистрация
Войти
Логин: Пароль: Запомнить:
Пользователи
Последние сообщения
Тема закрыта
1

Прокрутка div блока до упора вниз

Krevedko

  • Атом-мастер
  • Юзер
  • 227
  • Репутация:3 
  • Предупреждения: 0 
  • Регистрация:
    18 Ноя 2010
#1
Воспользовался статьей по Ajax'у от дрюни, сделал чат, соединенный с игровыми серваками.



Но вот до чата он еще не дотягивает, т.к. новые сообщения выводятся внизу, но при перезагрузке данных из базы, ползунок улетает наверх, а нужно наоборот. В JS я никакой, вот и прошу помощи. Основной скрипт вот:

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
<?php echo "<script type=\"text/javascript\">
                        function getRecords() {
                            $.get('?go=sys&sys=chat', {}, function(data){
                               $('#mg_chat').html(data);
                                   setTimeout(\"getRecords()\", 5000);
                            });
                        }
                        getRecords();
                        </script>"
?>

Пытался сделать якорем:
Code:
#bottom
<a name="bottom></a>
но не крутится.

Также пробовал window.scroll(0,4000), но прокручивается основное окно, тогда я сделал так:

var element = document.getelementbyid("mg_chat");
element.window.scroll(0,4000);


тоже ничего не вышло.

Drunya

  • Man of God
  • Админ
  • 3527
  • Репутация:110 
  • Предупреждения: 0 
  • Регистрация:
    30 Ноя -0001
#2
Krevedko, а я просто делаю сортировку сообщений в другом порядке. То есть что бы новые были вверху и проблема решается:)
Или тебе так не подходит?

Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)

Krevedko

  • Атом-мастер
  • Юзер
  • 227
  • Репутация:3 
  • Предупреждения: 0 
  • Регистрация:
    18 Ноя 2010
#3
Drunya, но вообще эти скачки в конец делают невозможным чтение старых сообщений. Как сделать так, чтобы информация обновлялась, но scroll вообще не двигался сам по себе?

Добавлено2011.06.25 11-14

Решение 1 - после обновления сдвигаем ползунок в самый низ:
Взять div с аяксом в еще один див и прописать ему класс, допустим chat
Code:
$(".chat").scrollTop($(".chat").get(0).scrollHeight);

Решение 2 - после обновления ползунок остается там где был:
Взять div с аяксом в еще один див и прописать ему класс, допустим chat
Code:
var scrollDown = ($(\".chat\").scrollHeight - $(\".chat\").scrollTop <= $(\".chat\").offsetHeight );
                                    $(\".chat\").scrollTop = scrollDown ? $(\".chat\").scrollHeight :
                                    $(\".chat\").scrollTop;

Отредактировано автором 25 Июн 2011

ARMI

  • Заклинатель Атома
  • Пользователь
  • 1858
  • Репутация:46 
  • Предупреждения: 0 
  • Регистрация:
    4 Янв 2011
#4
проблема решена. Тему закрываю.

Я горжусь тем, что помогаю в развитии бесплатной CMS - AtomX

Drunya

  • Man of God
  • Админ
  • 3527
  • Репутация:110 
  • Предупреждения: 0 
  • Регистрация:
    30 Ноя -0001
#5
Открыто по просьбе ТС, для дополнения(и опять закрыто)

Отредактировано автором 25 Июн 2011
Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)
1
Сейчас online: 42. Зарегистрированных: 1. Гостей: 41.