Scroll chaining - это когда скролишь в модалке или боковом меню, и при окончании скрола в ней начинает скролиться главное окно за модалкой.

Такое поведение можно отключить следующим правилом внутри элемента со скролом:

overscroll-behavior-y: contain;

Еще один совет - при переходе по роутам часто заметно "прыгание" содержимого экрана, потому что главный скроллбар то появляется, то исчезает в зависимости от количества контента или открытия модального окна.

Можно заранее зарезервировать под него место, и тогда визуально дерганий не будет. Сам скроллбар будет появляться по необходимости. Правило ставить надо на html тэг в общем случае.

scrollbar-gutter: stable;

#tip #css #scroll

Вчера был показан пример, как убрать дергание экрана из-за появляющегося-убирающегося скроллбара через scrollbar-gutter: stable;. Минус данного метода в том, что если бэкграунд сайта непрозрачный и "от края до края", то становится видна зарезервированная под скроллбар полоска.

Частично это можно исправить через scrollbar-gutter: stable both-edges; - постоянные полоски будут слева и справа.

Есть еще два варианта избежать "прыжков" страницы. Можно "накладывать" скроллбар на сайт при его появлении - именно это используется на проекте arty-crafty. Это делается через отрицательный отступ справа:

html {
    overflow-x: hidden;
    margin-right: calc(-1 * (100vw - 100%));
}

Также можно добавлять компенсационный отступ слева, тогда вся страница будет "сужаться" слева и справа равномерно при появлении скроллбара. Тут стабильность страницы будет зависеть от контента на нем (например, текст может перенестись) и нужно будет отдельно обработать элементы с position: fixed:

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

Понятно, что данные методы имеет смысл использовать только при разрешении экрана десктоп/ноутбук.

#tip #css #scroll

Infinity scroll vs. Virtual scroll


Infinity scroll

Загружается дополнительный контент по мере прокрутки страницы. Используется AJAX или аналогичные методы для подгрузки данных с сервера и добавления их в конец списка по мере достижения пользователем конца страницы.

Пользователи видят новый контент без необходимости нажимать кнопку "Загрузить еще" или переходить на другую страницу. Это обеспечивает плавный и непрерывный просмотр.

Производительность ухудшается с увеличением объема данных в DOM, поскольку все данные рендерятся одновременно.

Virtual scroll

Улучшение производительности больших списков происходит за счет рендеринга только видимой части данных. Поддерживается фиксированное количество элементов в DOM, контент которых обновляется динамически в зависимости от позиции прокрутки.

Пользователи также прокручивают список, но рендерятся только видимые элементы, что значительно улучшает производительность, особенно для очень больших списков. Это снижает нагрузку на память и улучшает плавность прокрутки.

#scroll

Как отключить scroll страницы, когда показываешь модальный диалог через <dialog>?

body:has(dialog[open]) {
  overflow: hidden;
}

Размыть фон/overlay?

dialog::backdrop {
  backdrop-filter: blur(2px);
}

#css #tip #scroll