Закрепляем скролл чата внизу без JavaScript С помощью overflow-anchor… — Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js@frontendproglib · 21K subscribers Open in TelegramOpen

Закрепляем скролл чата внизу без JavaScript

С помощью overflow-anchor можно обойтись без MutationObserver и scrollTo():


<div id="scroller">
  ...
  <div id="anchor"></div>
</div>


#scroller * { overflow-anchor: none; }
#anchor { overflow-anchor: auto; height: 1px; }

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