What is the max scrollTop value of a div block?

Question

There is a block, div , it contains a number of elements of different sizes. When adding one more, the scrolling should be in the lowest position.

The first solution was to calculate the height of the newly added element, store the sum of all the previous ones and read the "correct" value for the HTMLElement.scrollTop . Warning tips to wrap all the elements in a div and take its height, do not consider it out of sports interest.

It seemed to me tedious, I remembered that when assigning a value greater than the maximum in the scrollTop , it becomes the maximum itself, and, without hesitation, I wrote the value Number.MAX_SAFE_INTEGER . But the scrolling became the highest position. In this regard, the question is, what is the maximum value that can be written to this property and why is it? This behavior is repeated in Mozille and EJE, everything is normal in Chrome.

It turns out that the scrolling of an element cannot be equal to 9007199254740991 , but, for example, Number.MAX_SAFE_INTEGER - 1000000000000 = 9006199254740991 works perfectly in Mozille, but it turns out, not at all, but in EJE it is observed experimentally that even less!

 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>

works fine in Mozille, but it turns out that not everyone has it - not, if you insert this number, it really works in Firefox, but if you try for example: 2,147,483,648 - it will not work

Grundy grundy 58.6k 7 49 93 · Accepted Answer · 2016-07-23T11:53:51

So why does this not work in IE?

Everything is very simple here - the Number.MAX_SAFE_INTEGER field is not defined in IE, so the real substitute value is undefined , which is eventually converted to 0 .

Now more interesting: in EDGE and Firefox - this field is defined, but the value is still not applied.

It was established experimentally that in Firefox, the maximum value for this field, since it is an integer, is equal to the maximum positive value of a four-byte signed integer: that is, this field appears to be of type int

Range: -2,147,483,648 to 2,147,483,647

Therefore, the following snippet will work for 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>

Interestingly, in EDGE - the example still does not work.

I do not know what caused it, but it was experimentally found that the maximum value is one percent of the maximum value of int .

i.e. 2,147,483,647 / 100 = 21,474,836.47

Which completely corresponds to the formula: (Math.pow(2, 31) - 1)/100 .

Therefore, the following snippet should work in all tested browsers: Chrome, Firefox, EDGE, IE. (it will probably work in safari, but there is no way to check)

 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>

But in Mozille 9006199254740991 - it works, so this idea was rejected.
@Rolandius, as one of the options - when it is exceeded, it overflows and starts counting from the minimum number, that is, it is likely that the intervals are cyclically repeated when it is working and when it is not working
@Rolandius, in any case, it seems to me even to exceed the limit for IE / EDGE - you need to really try, so you can just put that number

Mr. Black Mr. Black 3,324 one 9 31 · Answer 2 · 2016-07-23T10:20:05

scrollHeight - the entire height of the content, that is 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>

This is a solution, but this method requires rendering to the DOM.
In my situation, the elements will add, at best, once or twice per second, my method would be more efficient.
@Rolandius, but what if you hang the listener to change the content?
@Rolandius, can I not quite understand the purpose of all this, do I need to fix the scroll below?

What is the max scrollTop value of a div block?

2 answers 2

More articles: