Css скролл всегда внизу

Как сохранить полосу прокрутки всегда внизу?

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

Что мне нужно, так это то, что изначально полоса прокрутки должна быть снизу.

Также, когда я щелкаю по сообщению отправки, я добавляю сообщение в элементы div ‘messageBody’. В это время полоса прокрутки должна снова опуститься.

Это текущий стиль моей полосы прокрутки

И я хочу, чтобы это было всегда

4 ответа

var messageBody = document.querySelector('#messageBody'); messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight; 

Предположим, ваш HTML-код, как это.

А затем заверните свой JS, как это

var objDiv = document.getElementById("parentDiv"); objDiv.scrollTop = objDiv.scrollHeight; 

Что-то вроде этого должно делать то, что вы хотите, если я правильно понял, что вы хотите.

Замените messageBody в getElementById() идентификатором контейнера сообщения чата.

var chatHistory = document.getElementById("messageBody"); chatHistory.scrollTop = chatHistory.scrollHeight; 

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

Сделайте это после того, как вы добавили новое сообщение в контейнер сообщений чата.

Ну вот. Следуйте этой концепции.

$('#messages').scrollTop($('#messages')[0].scrollHeight);

#chatbox-history < overflow: none; position: relative; width: 100%; height: 200px; border: 1px solid #ccc; >#messages < overflow: auto; position: absolute; bottom: 0; width: 100%; max-height: 200px; >#messages div

 
 
asdjf ;asd
 
ajsd fa ;skd f;s
 
asdjf ;akjs d;lf a;lksd fj
 
ajsd fkaj s;dlf a;ljsdl;fkja;lsd f; asd
 
Wassup?
 
 

Источник

отображение прокрутки всегда внизу css

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

Добавлено через 1 минуту
по мойму задается в css, да?

Как сделать чтобы скролл прокрутки textbox был всегда внизу
Как сделать чтобы скролл прокрутки в textbox был всегда внизу

Удерживание полосы прокрутки внизу
Здравствуйте! Создал чат, в котором есть <div > тут текстовой блок чата </div>.

Окно всегда. ВНИЗУ!
Вот есть у многих программ функция, когда окно всегда вверху( за примером далеко ходить не надо.

element.scrollTop = element.scrollHeight;

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

 html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> meta http-equiv="X-UA-Compatible" content="ie=edge"> title>Documenttitle> style> .wrapper { width: 100px; height: 200px; overflow: hidden; overflow-y: auto; } style> head> body> div class="wrapper" id="element"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, obcaecati quia? Nostrum perspiciatis adipisci quod tempora quas consequuntur nobis commodi repellat eum minus non praesentium, quos voluptatum rerum dignissimos culpa? div> script> element.scrollTop = element.scrollHeight; script> body> html>

Источник

Как сделать что бы scroll автоматом был прижат к низу при добавлении контента?

Войдите, чтобы написать ответ

Как задать название кнопок для доступности Google PageSpeed?

Identifier ‘misteryNum’ has already been declared (at k.js:1:1) не могу понять почему выдается эта ошибка?

Как включить подсветку синтаксиса в Pycharm, в файлах css?

Как сделать переключение фото в карточке товара?

Как обрезать текст и добавлять троеточие в конец?

Как при выходе из личного кабинета обнулить пользователя в функции useSWR?

Почему не работает функция вызванная в addEventListener?

Как сортировать объект в алфавитном порядке в js?

Как спозиционировать так карточки?

Почему при прокрутки в низ прокручивается до конца страницы?

Минуточку внимания

• Почему не заполняется переменная при использовании аннотации @Autowired возникает ошибка при использовании spring data и CrudRepository?
  • 2 подписчика
  • 0 ответов
  • 3 подписчика
  • 0 ответов
  • 5 подписчиков
  • 7 ответов
  • 2 подписчика
  • 0 ответов
  • 2 подписчика
  • 2 ответа
  • 2 подписчика
  • 0 ответов
  • 3 подписчика
  • 1 ответ
  • 2 подписчика
  • 2 ответа
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 2 ответа

  Источник

  Прикрепить горизонтальный скролл к низу окна, а не к концу страницы

  Всем доброго времени суток. Подскажите пожалуйста, можно ли как-нибудь сделать такую вот вещь:
  Есть очень широкая таблица, на неё есть горизонтальный скролл, когда в таблице немного строк, т.е., пока таблица влезает по высоте экрана и вертикальный скролл не отображается всё хорошо, но если таблица очень динная по высоте, то, чтобы мне достать мышкой до горизонтальной строки нужно пролистать в самый низ страницы. и мне бы хотелось этого избежать. Можно ли как-то закрепить горизонтальный скролл внизу именно окна, а не страницы?

  

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

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

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

  Запомнить горизонтальный скролл после обновления страницы
  Доброго времени суток! Подскажите как можно запомнить горизонтальный скролл после обновления.

  

  

  Сообщение было отмечено dalay_lama как решение

  Решение

  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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209

  div class="search-table-outter wrapper"> table class="search-table inner"> tr> th>Col1/th> th>Col2/th> th>Col3/th> th>Col4/th> th>Col5/th> th>Col6/th> th>Col7/th> th>Col8/th> th>Col9/th> th>Col10/th> /tr> tr> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> /tr> tr> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> /tr> tr> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> /tr> tr> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> /tr> tr> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> /tr> tr> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> /tr> tr> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> /tr> tr> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> /tr> tr> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> /tr> tr> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> /tr> tr> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> /tr> tr> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> /tr> tr> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> /tr> tr> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> /tr> tr> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> /tr> tr> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> td>bla-bla/td> /tr> /table> div id="w-scroll">div class="scroll">/div>/div> /div>

  .search-table-outter {border:2px solid red;overflow-x:hidden;position:relative;} .search-table{table-layout:fixed;margin:0px auto;} .search-table, td, th{border-collapse:collapse;border:1px solid #777;} th{padding:20px 40px;font-size:15px;color:#444;background:#66C2E0;} td{padding:5px 10px;height:35px;text-align:center;} #w-scroll {position:absolute;width:100%;height:auto;overflow-x:scroll} #w-scroll .scroll {height:1px;}

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

  $(function() { $('#w-scroll .scroll').css({width: $('.search-table').outerWidth()}); $('#w-scroll').scroll(function() { $('.search-table-outter').scrollLeft($(this).scrollLeft()); $(this).css({left: $(this).scrollLeft()}); }); $(window).scroll(function() { if($('.search-table').offset().top + $('.search-table').outerHeight() > $(window).height() + $(window).scrollTop()){ $('#w-scroll').css({top: $(window).height() + $(window).scrollTop() - 20, bottom: 'auto'}); }else{ $('#w-scroll').css({top: 'auto', bottom: 0}); }; }); $('#w-scroll').each(function() { if($('.search-table').offset().top + $('.search-table').outerHeight() > $(window).height() + $(window).scrollTop()){ $(this).css({top: $(window).height() + $(window).scrollTop() - 20, bottom: 'auto'}); }else{ $(this).css({top: 'auto', bottom: 0}); }; }); });

  Источник

  Удерживание полосы прокрутки внизу

  Дело в том, что сообщения чата появляются снизу, а полоса прокрутки у блока всё равно остаётся вверху.
  Скажите, как её всегда удерживать по умолчанию внизу?

  div с полосой прокрутки, стиль полосы прокрутки
  Добрый день! Подскажите как правильно создать блочный элемент, вероятней всего div встроенный в.

  Стилизация полосы прокрутки
  Имеется блок и внутри список. В свойстве блока overflov стоит авто, т.е с боку добавляется полоса.

  Параметры полосы прокрутки
  Подскажите, пожалуйста, как можно изменить внешний вид полосы прокрутки (которая появляется при.

  Автофокус горизонтальной полосы прокрутки
  горизонтальная полоса прокрутки в блочном элементе <p>, после того, как её двигаешь мышью, может.

  script type="text/javascript"> window.onload = function(){ document.getElementById('chatbox').scrollTop = 9999; } script>

  Стиль горизонтальной полосы прокрутки
  Здравствуйте, подскажите возможно ли изменить стиль полосы прокрутки т.е. изменить цвет и т.д.

  сайт дёргается из за полосы прокрутки
  Народ помогите пожалуйста! При кликам по меню, сайт дёргается влево из за полосы прокрутки на.

  Отключить полосы прокрутки в браузере
  Как отключить полосы прокрутки в Главном окне браузера?

  

  Появление нижней полосы прокрутки
  Товарищи, прошу помощи! Уже несколько часов бьюсь над вопросом, почему возникает нижняя полоса.

  Источник