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 you have read our privacy policy.

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