<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как прокрутить скролл у div до низа

Как прокрутить скролл у div до низа

Недавно мне надо было создать чат, и передо мной встала задача прокрутки скролла вниз у div, для того чтобы пользователь сразу увидел новое сообщение в чате. Сообщения чата, как Вы уже догадались, находились в div. Большинство программистов прокручивают скролл у div до низа неправильно, а в этой статье я покажу, как делать это с максимально чистым кодом.

Для начала приведу HTML-код:

<div id="block">
  <p>Текст</p>
  <p>Текст</p>
  <p>Текст</p>
  <p>Текст</p>
  <p>Текст</p>
  <p>Текст</p>
</div>

Теперь продемонстрирую CSS-код, который необходим, чтобы появилась полоса прокрутки:

div {
  height: 100px;
  overflow: auto;
  width: 200px;
}

Теперь перейдём к прокрутке скролла у div. Большинство программистов делает так:

<script type="text/javascript">
  var block = document.getElementById("block");
  block.scrollTop = 9999;
</script>

Безусловно, данный способ рабочий. Но что если размер div огромен? Тогда полоса прокрутки уйдёт не до низа. Можно, конечно, поставить 99999999 и даже больше, но это смотрится ещё хуже. А ведь есть куда более простое и элегантное решение:

<script type="text/javascript">
  var block = document.getElementById("block");
  block.scrollTop = block.scrollHeight;
</script>

Здесь прокрутка уйдёт до самого низа div независимо от его размеров, плюс нет констант прямо в коде, которые всегда его портят.

И, наконец, его можно использовать не только для div, но и для самой страницы:

<script type="text/javascript">
  document.body.scrollTop = document.body.scrollHeight;
</script>

Как видите, всё очень просто. Также данный способ является кроссбраузерным, поэтому можете смело его использовать.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (7):

wanderer wanderer 30.09.2013 15:17:00

Михаил! А как сделать чтобы в чате если пишет человек два сообщения, то аватар извлекается только при первом сообщении а при втором сообщении будет просто пустое место?

Ответить

Admin Admin 01.10.2013 21:25:21

if (первый раз) загрузить_аватар.

Ответить

rysich rysich 12.12.2013 00:41:12

Лучше всё же не overflow: auto; а overflow-y: auto, иначе у вас может чат поехать в ширину при некоторых условиях.

Ответить

tikkiwiki tikkiwiki 12.12.2013 10:42:01

Тогда уж лучше: overflow-x: auto overflow-y: auto И вообще, overflow не действует на Chrmoe,Opera,Safari, работает только в лисе да эксплорере.

Ответить

rysich rysich 12.12.2013 10:53:56

Сделайте div большой высоты и поставьте внутрь него картинку огромной ширины, после чего откройте в хроме. Если у вас стоит overflow: auto или overflow-x: auto он будет прокручиваться как по горизонтали, так и по вертикали. Если значение auto не будет работать в вашем браузере, то overflow: scroll точно сработает. А теперь представьте, что какой-нибудь приколист засунет вам в чат картинку размером 10000x1.

Ответить

Maxx Vell Maxx Vell 26.02.2014 19:07:49

Михаил, Здравствуйте. Как можно изменить оформление полосы прокрутки - изменить ширину, использовать другой рисунок вместо "бегунка", поменять его цвет и цвет самой области прокрутки, убрать стрелки ? Спасибо.

Ответить

tikkiwiki tikkiwiki 04.03.2014 14:10:07

Максим, с помощью стилей меняются, но с последними изменениями в браузерах, это ничего не действует.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.