Почему scroll иногда внезапно прыгает сам по себе?

Добавляешь новый контент сверху и браузер внезапно меняет scroll-position. Особенно часто это ломает chat, infinite-feed и lazy-load layout.

Обычно проблема появляется при:
prepend,
lazy-image,
dynamic-content

Браузер пытается помочь и автоматически удерживает пользователя на прежнем месте через scroll anchoring.

Но в динамических интерфейсах это часто создаёт хаос.
.chat {
overflow-anchor: none;
}

Теперь браузер перестаёт вмешиваться в scroll-position контейнера.

Особенно полезно для:
chat,
feed,
virtual-list,
infinite-scroll

Где контент постоянно догружается или меняется.

Можно отключать anchoring точечно даже у отдельных элементов.
.loader {
overflow-anchor: none;
}

Например у skeleton, lazy-image или рекламных блоков.

overflow-anchor: none убирает один из scroll-багов в динамических интерфейсах.

Code Ready | #совет