По умолчанию прокрутить div в конец

@Rva4 · Регистрация: 26.01.2016

Студворк — интернет-сервис помощи студентам

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

@новый вася · 21.12.2016, 20:34

с помощью js или jquery не сложно а вот с помощью css + html на сколько я помню не возможно

@mrtoxas · 21.12.2016, 22:35

Приведите код блока

@Rva4 · 21.12.2016, 23:27 **[ТС]**

новый вася, Подскажите как с помощью js

Добавлено через 1 минуту
mrtoxas,

HTML5
1
class="work_chat_dispatcher_background">123</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">12355</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">1</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">6</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">7</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">7</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">7</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">ааааааааааааааааа</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">ввввввввввввв</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">ввввввввввввв</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">ввввввввввввв</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">ввввввввввввв</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">ввввввввввввв</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">ввввввввввввв</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">55</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">55</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">99</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">99</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">99</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">/</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">---</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">===========</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">===========</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">===========</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">а2</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">ываралропавыфпролд</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">нгорьти </div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">44</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">852</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">sdfg</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">/*/</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">iuop</div></div><div class="work_chat_depatcher"><div class="work_chat_dispatcher_background">/*-*/*--*/-*</div></div></div>

@Fedor92 · 21.12.2016, 23:34

JavaScript
1
2
var block = document.getElementById("work_chat_mes");
    block.scrollTop = block.scrollHeight;

@Rva4 · 21.12.2016, 23:38 **[ТС]**

Fedor92, не работает

@Fedor92 · 21.12.2016, 23:41

Сообщение от Rva4

Fedor92, не работает

Fedor92 так и поверил...

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    html, body{width: 100%; height: 100%; margin: 0}
    #work_chat_mes{width: 60%; height: 600px; margin: 0 auto; overflow-y:scroll}
    </style>
</head>
<body>
    <div id="work_chat_mes">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, numquam cupiditate asperiores totam a fugiat excepturi. Facilis, atque, placeat fuga amet quidem id at itaque doloribus quo nam numquam nobis!</div>
    <div>Vero, vel, asperiores, dicta quisquam a inventore quam placeat reprehenderit soluta sint maiores numquam dolore voluptatibus odit itaque eaque aliquid earum dolorem pariatur laboriosam quas eum esse voluptates commodi non?</div>
    <div>Beatae, deserunt, excepturi eos ducimus ea sequi perspiciatis tenetur temporibus sit fugiat eum eveniet sunt veritatis hic neque. Quas, veniam, recusandae animi ipsam eum vel eos officiis provident error facilis.</div>
    <div>Sint, voluptate, eveniet, nesciunt aspernatur veniam labore commodi minima rerum neque cupiditate enim in distinctio quam qui id aperiam tenetur nobis adipisci soluta obcaecati delectus accusantium veritatis. Natus, eius, excepturi!</div>
    <div>Earum, et inventore hic eligendi nam facilis corporis enim. Doloribus, fugit, veritatis, ullam et harum porro accusamus omnis corporis dolores totam laudantium velit cupiditate sed reprehenderit quibusdam impedit est eaque.</div>
    <div>Recusandae, praesentium, minima, alias quam facere molestiae unde animi ullam impedit iusto soluta cum consequatur minus aspernatur possimus maxime quos! Iure, eum dolore eos quos iusto veniam voluptate labore doloribus!</div>
    <div>Esse, ratione, mollitia nobis et porro aliquid iste quibusdam consectetur rerum quisquam voluptatum molestiae libero. Nisi, maiores, enim quaerat quae soluta commodi nesciunt nulla et ea magnam deserunt unde voluptates.</div>
    <div>Molestiae, perspiciatis, aliquam, similique ab possimus commodi autem soluta repellendus suscipit excepturi adipisci optio laborum cumque. Vel, accusamus voluptatibus aperiam aliquam quisquam nemo commodi rem. Cum eveniet expedita animi eos.</div>
    <div>Est, dolore maxime dolorem eveniet quae repellendus. Adipisci, voluptates, sunt, amet, velit facere odio voluptatibus quasi praesentium omnis corporis asperiores quis eveniet. Illum architecto necessitatibus sapiente odio nobis cumque culpa!</div>
    <div>Harum, incidunt, a quod aspernatur atque cupiditate quaerat aliquid cumque eaque culpa saepe ipsa expedita error nostrum voluptates veniam quisquam accusantium vel sunt odit doloribus obcaecati debitis explicabo totam ipsam.</div>
    <div>Eveniet, facere commodi debitis ullam explicabo tenetur ipsam aliquam repellat! Nihil, autem, necessitatibus unde adipisci ipsam delectus dignissimos in quos accusamus doloremque maxime repellendus eius nemo officia eligendi inventore alias.</div>
    <div>Ad, quas cumque veritatis ipsum exercitationem cum quaerat nemo quae corporis. Et, rem, distinctio obcaecati quia deserunt temporibus debitis qui accusantium nisi harum blanditiis labore ullam commodi asperiores consectetur modi!</div>
    <div>Ratione, temporibus voluptas iure tenetur consequuntur quisquam officiis iste excepturi voluptates velit dicta ducimus facere dolores beatae nobis neque blanditiis! Quibusdam, cupiditate optio et quaerat similique fugiat officiis ab libero.</div>
    <div>Et, veritatis, accusantium, repellendus tenetur ipsam quia reprehenderit dignissimos cum autem ex atque quasi quas ab esse quidem perspiciatis sed exercitationem nam nobis perferendis quos est in aut fugit quo?</div>
    <div>Eaque, deleniti, ea, eveniet debitis voluptas rem assumenda consequatur autem perferendis aspernatur necessitatibus voluptatem ullam distinctio a provident enim ipsa facere quis vel nulla illo fuga facilis maxime praesentium eius.</div>
    <div>Totam, quia sint molestias consectetur at animi odio doloribus fugiat molestiae debitis laborum voluptatem quos libero id consequatur corporis sapiente expedita accusantium rerum sunt sequi nisi explicabo iure perspiciatis delectus!</div>
    <div>Corrupti, asperiores dolorum omnis eligendi ea adipisci saepe ipsa nesciunt explicabo! Illo, molestias, consequatur, provident at adipisci officiis velit accusantium rem a quia minus atque distinctio iusto sed quaerat alias.</div>
    <div>Tempora, vero debitis excepturi deleniti explicabo sint libero similique laborum! Quae, quos, dolore, ipsum, nam corrupti provident architecto similique dolorem quaerat quasi saepe enim qui eligendi tempore velit esse laboriosam!</div>
    <div>Repudiandae, rerum aut officiis perferendis tempora rem impedit ea deleniti molestiae dolore optio error hic architecto itaque quam quibusdam aliquam pariatur repellat voluptate saepe laborum delectus dolor amet eaque ullam.</div>
    <div>Quia, aliquid, tempore delectus voluptatum natus magnam incidunt blanditiis voluptate quod error odio eum at cum quis iste dicta perferendis doloremque facilis ducimus molestias eius laudantium cumque accusantium quos atque.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, debitis, quis reiciendis cumque dignissimos voluptate nihil perspiciatis temporibus itaque pariatur impedit fugiat labore aspernatur hic consectetur voluptas earum quo voluptatem.</div>
    <div>Consectetur, tempore, corporis, voluptates excepturi vel eligendi facilis at omnis dolores incidunt odit dolorem modi! Dolorum, voluptatum, sunt, illo beatae quos ut itaque nisi tempora mollitia in vitae ipsam culpa.</div>
    <div>Quia, est, tempora, doloremque, sit expedita quas accusantium recusandae ab perferendis architecto aspernatur non animi iure asperiores numquam! Natus, consequuntur nisi voluptatibus modi saepe distinctio animi. Officia hic eveniet nesciunt.</div>
    <div>Rerum, nisi, minima, temporibus, deserunt maxime alias fugit ducimus hic accusantium libero modi nobis delectus magni perferendis quae molestias voluptatem neque dolores facilis commodi sapiente rem deleniti facere numquam repellat!</div>
    <div>Aliquid odio necessitatibus tempora possimus doloribus dolorum voluptatum eius repellat voluptate quibusdam. Possimus quasi aliquid accusamus minima sapiente dolorem quae inventore odio repellendus! Vel quos molestiae ipsa unde illum at!</div>
    <div>Aut, sint, dolore doloribus voluptates perferendis quam maxime labore ipsum modi iste quibusdam molestias qui obcaecati possimus necessitatibus sapiente assumenda rem enim veritatis in dignissimos pariatur illum illo rerum aspernatur.</div>
    <script type="text/javascript">
        var block = document.getElementById("work_chat_mes");
        block.scrollTop = block.scrollHeight;
    </script>
</body>
</html>

@Rva4 · 21.12.2016, 23:43 **[ТС]**

Fedor92, У меня тут данные блока постоянно обновляются, вставил Ваш код после добавления в блок элемента. В чем может быть причина?

Добавлено через 31 секунду
Fedor92,

JavaScript
1
2
3
4
5
            $('#work_chat_mes').empty();
                            $('#work_chat_mes').append(data);
                            
                            block = document.getElementById("work_chat_mes");
                            block.scrollTop = block.scrollHeight;

@Fedor92 · 21.12.2016, 23:49

Jquery и нативный js вместе - это что-то...

Сообщение от Rva4

В чем может быть причина?

Возможно в асинхронности... Нативный js cрабатывает раньше, чем jquery, поэтому не реагирует на добавление данных... Ищите решение на jquery...

@Rva4 · 21.12.2016, 23:53 **[ТС]**

Fedor92, Ладно, спасибо

Добавлено через 3 минуты
Вдруг кому пригодится на Jquery

JavaScript
1
2
var div = $("#work_chat_mes");
div.scrollTop(div.prop('scrollHeight'));

Новые блоги и статьи Все статьи Все блоги /
Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .

@Rva4 3 / 3 / 2 Регистрация: 26.01.2016 Сообщений: 229

	По умолчанию прокрутить div в конец 21.12.2016, 20:24. Показов 4204. Ответов 9 Метки нет (Все метки) есть блок див, он прокручивается внутри, по умолчанию показывается его начало, а в конец можно переместиться с помощью скролла. Как можно сделать так, чтобы по умолчанию сразу показывался конец? 0

@новый вася 1 / 1 / 1 Регистрация: 22.01.2015 Сообщений: 40
	21.12.2016, 20:34
	с помощью js или jquery не сложно а вот с помощью css + html на сколько я помню не возможно 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	21.12.2016, 22:35
	Приведите код блока 0

@Rva4 3 / 3 / 2 Регистрация: 26.01.2016 Сообщений: 229
	21.12.2016, 23:38 [ТС]
	Fedor92, не работает 0