LETUNOFF DOCS

CSS. Якорение прокрутки

🧱 Суть

overflow-anchor – это CSS-свойство, которое управляет scroll anchoring (якорением прокрутки).

Оно позволяет браузеру сохранять позицию скролла при изменениях контента и может использоваться для создания эффекта “приклеенного” скролла в чатах.

Пример:

<div id="scroller">
  ...
  <div id="anchor"></div>
</div>
#scroller * {
  overflow-anchor: none;
}
 
#anchor {
  overflow-anchor: auto;
  height: 1px;
}

📦 Проблема

1. Обычно для чатов используют JavaScript

Например:

scrollTo(0, element.scrollHeight);

или отслеживание изменений:

MutationObserver

Проблемы:

  • дополнительный JavaScript-код
  • необходимость вручную следить за изменениями DOM
  • возможные скачки скролла

2. Новые сообщения могут сдвигать позицию прокрутки

Когда в список добавляется контент, браузер пытается сохранить текущую позицию.
Это удобно для чтения страниц, но не всегда подходит для чатов.

✅ Решение

Использовать встроенный механизм браузера:

overflow-anchor

И создать специальный элемент-якорь в конце списка.

💻 Код

По умолчанию браузеры используют scroll anchoring:

изменение контента → браузер сохраняет текущую позицию скролла

Чтобы изменить поведение:

  1. отключаем якорение у всех элементов:
#scroller * {
  overflow-anchor: none;
}
  1. включаем его только у последнего элемента:
#anchor {
  overflow-anchor: auto;
}

Теперь браузер использует этот элемент как точку привязки.

Пример структуры чата

<div id="scroller">
  <div class="message">Hello</div>
  <div class="message">Hi</div>
  <div class="message">How are you?</div>
 
  <div id="anchor"></div>
</div>

Когда добавляется новое сообщение:

новое сообщение
        ↓
anchor остаётся внизу
        ↓
скролл следует за ним

Важный момент

Этот подход не заменяет все сценарии.

Для сложных чатов могут понадобиться:

  • ручное управление скроллом
  • виртуализация списка
  • IntersectionObserver

Но для простого списка сообщений CSS может быть достаточно.

🎯 Вывод

  • overflow-anchor управляет поведением скролла при изменении контента
  • позволяет закрепить скролл без MutationObserver и scrollTo()
  • используется через специальный элемент-якорь в конце списка
  • уменьшает количество JavaScript-логики
  • подходит для простых чат-интерфейсов

🔗 Связано