Михаил

Недавно искал и тоже не нашел готовый плагин, пришлось писать самому. Код сейчас недоступен, алгоритм следующий:
1. Размещаем сверху списка элемент
2. Создаём IntersectionObserver с этим элементом
3. Когда срабатывает callback на появление элемента в зоне видимости запоминаем положение скролла относительно низа страницы и запускаем загрузку данных, а по окончании загрузки рендерим данные на страницу и ставим скролл на значение, которое запоминали ранее.

Ну ещё лоадер можно отрисовать, когда идёт загрузка данных и выставлять флаг, чтобы при повторном появлении не запускалась ещё одна загрузка данных и т.д. по вкусу

Сообщения мигают из-за

container.innerHTML = "";.

Попробуйте обернуть в try catch

controller.abort();
controller = new AbortController();
try{
    let response = await fetch("http://localhost:3000/messages", {signal: controller.signal});
    let messages = await response.json();
    counter = messages.length;
    let container = document.getElementById("container");
    container.innerHTML = "";
    renderMessages(messages);
} catch (e) {
  console.error(e);
}

!entry.isIntersecting - пропал
entry.isIntersecting - появился

Изучил основы JavaScript, понял что всякие манипуляции DOM мне не нужны, потому что это не используется больше

JavaScript как раз и придумали чтобы проводить манипуляции с DOM.
Вам надо определиться в первую очередь фронт хотите развивать или бэк, сразу фулстек это в никуда. Если фронт, то обязательно сначала чистый JS, а потом React, а уже потом typescript. Затем уже изучайте парадигмы и архитектуры. Сделайте Pokédex app, хороший будет опыт для начала и уже с нормальным готовым API (заодно и структуру данных ответа сможете посмотреть, что-то перенять)

Если кому интересно, нашел решение. Надо элемент video и div с контролами обернуть в блок wrapper и уже wrapper'у отправлять requestFullscreen