Почему сообщаемая прокрутка элемента отличается от того, что мы видим? ⇐ Javascript

[Anonymous]

Я реализовал короткую функцию, которая регистрирует сообщение внутри div и сохраняет прокрутку div до конца, если он уже был прокручен до низа. Вы можете увидеть короткую демо-версию здесь.

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

Код: Выделить всё

function log(text: string): void {
const isBottom = logDiv.scrollHeight - logDiv.offsetHeight - logDiv.scrollTop < 3;
logDiv.appendChild(document.createTextNode(text));
logDiv.appendChild(document.createElement("br"));
if (isBottom) {
logDiv.scroll(0, logDiv.scrollHeight);
}
}

while (true) {
//Keep the CPU busy to simulate a lower framerate (makes the issue easier to see) (omitted code for brevity)

await new Promise(resolve => setTimeout(resolve));

//Make some random message (omitted code for brevity)
log(text);
}

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

Я бы сказал, что в Firefox она дает сбой примерно в 75 % случаев при прокрутке вверх и в 40 % в Chrome. Это означает, что после того, как элемент заметно прокрутился вверх, он сообщает, что он не прокручивался вверх, и возвращается обратно вниз. С другим кодом эти проценты были выше.

С другой стороны, пытаясь заставить его привязаться к низу, я бы сказал, что оба браузера терпят неудачу примерно в 90% случаев. Элемент заметно прокручивается вниз, но браузер сообщает, что это не так, и поэтому не остается прокрученным вниз при добавлении новой строки.
Я знаю, что существуют совершенно разные подходы для достижения этой функциональности, но, насколько я могу судить, мой код логически обоснован. В первую очередь меня интересует, почему браузер сообщает о неправильном значении, а во вторую очередь мне любопытно, почему браузер всегда не сообщает о неправильном значении?
В качестве дополнительного бонуса, если вы знаете об исправлении, которое не использует совершенно другой подход, это тоже было бы неплохо.

Подробнее здесь: https://stackoverflow.com/questions/799 ... hat-we-see