2

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

Первое решение было считать высоту вновь добавленного элемента, хранить сумму всех предыдущих и считать "правильно" значение для HTMLElement.scrollTop. Предупреждая советы обернуть все элементы в div и брать его высоту, не рассматриваю это из спортивного интереса.

Мне показалось это нудным, я вспомнил про то, что при назначении в scrollTop величины больше максимальной, она становится сама максимальной, и, не долго думая, я написал туда значение Number.MAX_SAFE_INTEGER. Но прокрутка становилась в самое верхнее положение. В связи с этим вопрос, какое максимальное значение может быть записано в это свойство и почему оно такое? Такое поведение повторяется в Мозилле и ЭДЖЕ, в Хроме нормально все.

Получается, что прокрутка у элемента не может быть равна 9007199254740991, но вот, например, Number.MAX_SAFE_INTEGER - 1000000000000 = 9006199254740991 работает отлично в Мозилле, но, оказывается, не у всех, а в ЕДЖЕ экспериментальным способом замечено, что и того меньше!

addMessage('Афоня', 'Поймать покемонов в популярной игре Pokemon Go можно и в здании Центробанка, рассказал директор направления «Молодые профессионалы» Дмитрий Песков в ходе форума Агентства стратегических инициатив. «На совещании в ЦБ я поймал покемона прямо на одежде одного из руководителей Центробанка. Мне сказали, что я занимаюсь ерундой. На что я ответил: коллеги, Nintendo заработала за неделю денег больше, чем вы печатаете за год», — сказал Песков.');

function addMessage(nickname, msg) {
  var container = document.querySelector('.ui7--main_messages');
  
  var message = document.createElement('div');
  message.classList.add('ui7--main_message');

  var name = document.createElement('span');
  name.classList.add('ui7--main_message_name');
  name.innerHTML = nickname;

  var text = document.createElement('span');
  text.classList.add('ui7--main_message_text');
  text.innerHTML = msg;

  message.appendChild(name);
  message.appendChild(text);
  container.appendChild(message);

  container.scrollTop = Number.MAX_SAFE_INTEGER;
}
.ui7--main_messages {
  height: 250px;
  width: 300px;
  overflow: auto;
  font-size: 0.9em;
}
.ui7--main_message {
  width: 100%;
  margin: 15px 0;
  text-align: justify;
}
.ui7--main_message:first-child {
  margin-top: 0;
}
.ui7--main_message_name {
  font-weight: 700;
}
.ui7--main_message_name:after {
  content: ": "
}
<div class="ui7--main_messages">
  <div class="ui7--main_message">
    <span class="ui7--main_message_name" style="color:red">Yurik</span>
    <span class="ui7--main_message_text">azazaza azazuli?</span>
  </div>
  <div class="ui7--main_message">
    <span class="ui7--main_message_name" style="color:green">Vanik</span>
    <span class="ui7--main_message_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident deserunt porro rerum eveniet eaque aperiam ab doloribus! Ratione repudiandae, molestiae numquam libero, dignissimos, asperiores pariatur modi ad sunt harum at?</span>
  </div>
</div>

1
  • работает отлично в Мозилле, но, оказывается, не у всех - не, если это число вставлять, то действительно работает в Firefox, но если пробовать например: 2,147,483,648 - то работать не будет
    – Grundy
    23 июл 2016 в 19:04

2 ответа 2

2

Итак, почему это не работает в IE?

Тут все очень просто - в IE не определено поле Number.MAX_SAFE_INTEGER, поэтому реальное подставляемое значение - undefined, которое в итоге конвертируется в 0.

Теперь интереснее: в EDGE и Firefox - данное поле определено, но значение все еще не применяется.

Экспериментальным путем было установлено, что в Firefox - максимальное значение для этого поля, так как это целое число, равно максимальному положительному значению четырехбайтного знакового целого: то есть по всей видимости данное поле имеет тип int

Диапазон: от -2,147,483,648 до 2,147,483,647

Поэтому для Firefox будет работать следующий сниппет:

addMessage('Афоня', 'Поймать покемонов в популярной игре Pokemon Go можно и в здании Центробанка, рассказал директор направления «Молодые профессионалы» Дмитрий Песков в ходе форума Агентства стратегических инициатив. «На совещании в ЦБ я поймал покемона прямо на одежде одного из руководителей Центробанка. Мне сказали, что я занимаюсь ерундой. На что я ответил: коллеги, Nintendo заработала за неделю денег больше, чем вы печатаете за год», — сказал Песков.');

function addMessage(nickname, msg) {
  var container = document.querySelector('.ui7--main_messages');

  var message = document.createElement('div');
  message.classList.add('ui7--main_message');

  var name = document.createElement('span');
  name.classList.add('ui7--main_message_name');
  name.innerHTML = nickname;

  var text = document.createElement('span');
  text.classList.add('ui7--main_message_text');
  text.innerHTML = msg;

  message.appendChild(name);
  message.appendChild(text);
  container.appendChild(message);

  container.scrollTop = Math.pow(2, 31) - 1; //2147483647
}
.ui7--main_messages {
  height: 250px;
  width: 300px;
  overflow: auto;
  font-size: 0.9em;
}
.ui7--main_message {
  width: 100%;
  margin: 15px 0;
  text-align: justify;
}
.ui7--main_message:first-child {
  margin-top: 0;
}
.ui7--main_message_name {
  font-weight: 700;
}
.ui7--main_message_name:after {
  content: ": "
}
<div class="ui7--main_messages">
  <div class="ui7--main_message">
    <span class="ui7--main_message_name" style="color:red">Yurik</span>
    <span class="ui7--main_message_text">azazaza azazuli?</span>
  </div>
  <div class="ui7--main_message">
    <span class="ui7--main_message_name" style="color:green">Vanik</span>
    <span class="ui7--main_message_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident deserunt porro rerum eveniet eaque aperiam ab doloribus! Ratione repudiandae, molestiae numquam libero, dignissimos, asperiores pariatur modi ad sunt harum at?</span>
  </div>
</div>

Что интересно, в EDGE - пример все еще не работает.

Не знаю чем было обусловлено, но экспериментально было найдено, что максимальное значение - это один процент от максимального значения int.

то есть 2,147,483,647/100 = 21,474,836.47

Что вполне соответствует формуле: (Math.pow(2, 31) - 1)/100.

Поэтому следующий сниппет должен работать во всех проверенных браузерах: Chrome, Firefox, EDGE, IE. (возможно будет работать и в сафари, но нет возможности проверить)

addMessage('Афоня', 'Поймать покемонов в популярной игре Pokemon Go можно и в здании Центробанка, рассказал директор направления «Молодые профессионалы» Дмитрий Песков в ходе форума Агентства стратегических инициатив. «На совещании в ЦБ я поймал покемона прямо на одежде одного из руководителей Центробанка. Мне сказали, что я занимаюсь ерундой. На что я ответил: коллеги, Nintendo заработала за неделю денег больше, чем вы печатаете за год», — сказал Песков.');

function addMessage(nickname, msg) {
  var container = document.querySelector('.ui7--main_messages');

  var message = document.createElement('div');
  message.classList.add('ui7--main_message');

  var name = document.createElement('span');
  name.classList.add('ui7--main_message_name');
  name.innerHTML = nickname;

  var text = document.createElement('span');
  text.classList.add('ui7--main_message_text');
  text.innerHTML = msg;

  message.appendChild(name);
  message.appendChild(text);
  container.appendChild(message);

  container.scrollTop = (Math.pow(2, 31) - 1) / 100; //21474836.47
}
.ui7--main_messages {
  height: 250px;
  width: 300px;
  overflow: auto;
  font-size: 0.9em;
}
.ui7--main_message {
  width: 100%;
  margin: 15px 0;
  text-align: justify;
}
.ui7--main_message:first-child {
  margin-top: 0;
}
.ui7--main_message_name {
  font-weight: 700;
}
.ui7--main_message_name:after {
  content: ": "
}
<div class="ui7--main_messages">
  <div class="ui7--main_message">
    <span class="ui7--main_message_name" style="color:red">Yurik</span>
    <span class="ui7--main_message_text">azazaza azazuli?</span>
  </div>
  <div class="ui7--main_message">
    <span class="ui7--main_message_name" style="color:green">Vanik</span>
    <span class="ui7--main_message_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident deserunt porro rerum eveniet eaque aperiam ab doloribus! Ratione repudiandae, molestiae numquam libero, dignissimos, asperiores pariatur modi ad sunt harum at?</span>
  </div>
</div>

6
  • Интересная идея насчет 32 битного инта. Но в Мозилле 9006199254740991 - работает, поэтому эта идея была отвергнута. Все склоняюсь к тому, что это глюк браузеров.
    – Rolandius
    23 июл 2016 в 18:33
  • @Rolandius, какая версия? я проверял в 47.0.1 - если ставить больше - не работало
    – Grundy
    23 июл 2016 в 18:34
  • @Rolandius, в качестве одного из вариантов - при превышении идет переполнение и начинает отсчет с минимального числа, то есть вероятно циклично повторяются интервалы когда работает и когда неработает
    – Grundy
    23 июл 2016 в 18:38
  • @Rolandius, в любом случае, мне кажется даже чтобы превысить лимит для IE/EDGE - нужно очень постараться, поэтому можно просто ставить то число
    – Grundy
    23 июл 2016 в 18:39
  • 47.0, возможно это еще как-то от системы зависит. Отмечу Ваш ответ как правильный, если больше никто не придумает почему так.
    – Rolandius
    23 июл 2016 в 18:43
1

scrollHeight - вся высота контента, тоесть scrollTop = scrollHeight - offsetHeight

addMessage('Афоня', 'Поймать покемонов в популярной игре Pokemon Go можно и в здании Центробанка, рассказал директор направления «Молодые профессионалы» Дмитрий Песков в ходе форума Агентства стратегических инициатив. «На совещании в ЦБ я поймал покемона прямо на одежде одного из руководителей Центробанка. Мне сказали, что я занимаюсь ерундой. На что я ответил: коллеги, Nintendo заработала за неделю денег больше, чем вы печатаете за год», — сказал Песков.');

function addMessage(nickname, msg) {
  var container = document.querySelector('.ui7--main_messages');
  
  var message = document.createElement('div');
  message.classList.add('ui7--main_message');

  var name = document.createElement('span');
  name.classList.add('ui7--main_message_name');
  name.innerHTML = nickname;

  var text = document.createElement('span');
  text.classList.add('ui7--main_message_text');
  text.innerHTML = msg;

  message.appendChild(name);
  message.appendChild(text);
  
  setTimeout(function() {
    container.appendChild(message);
    container.scrollTop = container.scrollHeight - container.offsetHeight;
    
    console.log(container.scrollHeight, container.offsetHeight);
  }, 1000);

  //container.scrollTop = Number.MAX_SAFE_INTEGER;
  
  console.log(container.scrollHeight, container.offsetHeight);
}
.ui7--main_messages {
  height: 250px;
  width: 300px;
  overflow: auto;
  font-size: 0.9em;
}
.ui7--main_message {
  width: 100%;
  margin: 15px 0;
  text-align: justify;
}
.ui7--main_message:first-child {
  margin-top: 0;
}
.ui7--main_message_name {
  font-weight: 700;
}
.ui7--main_message_name:after {
  content: ": "
}
<div class="ui7--main_messages">
  <div class="ui7--main_message">
    <span class="ui7--main_message_name" style="color:red">Yurik</span>
    <span class="ui7--main_message_text">azazaza azazuli?</span>
  </div>
  <div class="ui7--main_message">
    <span class="ui7--main_message_name" style="color:green">Vanik</span>
    <span class="ui7--main_message_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident deserunt porro rerum eveniet eaque aperiam ab doloribus! Ratione repudiandae, molestiae numquam libero, dignissimos, asperiores pariatur modi ad sunt harum at?</span>
  </div>
</div>

7
  • Это решение, но этот метод требует отрисовку в DOM. В моей ситуации элементы будут добавлять в лучшем случае раз-два в секунду, мой способ был бы эффективнее. Но проблема с максимальным числом!
    – Rolandius
    23 июл 2016 в 10:24
  • @Rolandius, интересная задача)
    – Doofy
    23 июл 2016 в 10:26
  • @Rolandius, а что если повесить слушателя на изменение контента?
    – Doofy
    23 июл 2016 в 10:34
  • Что это изменит?
    – Rolandius
    23 июл 2016 в 10:36
  • @Rolandius, может я не совсем понял цель всего этого, нужно закрепить скролл снизу?
    – Doofy
    23 июл 2016 в 10:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.