Почему 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-багов в динамических интерфейсах.