#статья дня
Polypane выпустили прекрасную статью о том, что вы все делаете скролл на страницах неверно. А точнее, как делать верно.
Суть — сплошь и рядом ломаете прокрутку на body.
У страницы в браузере есть специальный root scroller — тот самый скролл всего документа.
И браузер умеет для него заметно больше, чем для обычного div с overflow: auto: восстанавливает позицию после перехода назад, прокручивает страницу с клавиатуры, обслуживает window.scrollY / scrollTo, нормально делает печать и полностраничные скриншоты.
На мобильных от него ещё зависят схлопывание адресной строки, tap-to-top на iOS и pull-to-refresh.
Проблема в том, что отказаться от всего этого очень легко. Классический app shell:
html, body { height: 100%; overflow: hidden }
и потом height: 100vh; overflow: auto на wrapper — визуально страница продолжает совершенно нормально скроллиться, только теперь скроллится не документ, а вложенный контейнер. Ещё более неприятный вариант — сочетание height: 100% и overflow-x: hidden: из-за правил overflow body тоже может незаметно превратиться в scroll container.
Проверяется смешно просто: прокрутить страницу и посмотреть window.scrollY. Если там всё ещё 0, скроллится что-то другое. Автор дальше разбирает типичные случаи — full-height layout, fixed header/sidebar, горизонтальный overflow, блокировку скролла под modal — и показывает, как оставить основной скролл браузеру. Например, использовать min-height: 100svh вместо фиксированного 100vh, position: sticky вместо app shell с отдельным скроллом, а для обрезки горизонтального overflow — clip вместо hidden.
Ссылка ещё раз: The root scroller and how not to lose it
#css #scroll #root #appshell
Polypane выпустили прекрасную статью о том, что вы все делаете скролл на страницах неверно. А точнее, как делать верно.
Суть — сплошь и рядом ломаете прокрутку на body.
У страницы в браузере есть специальный root scroller — тот самый скролл всего документа.
И браузер умеет для него заметно больше, чем для обычного div с overflow: auto: восстанавливает позицию после перехода назад, прокручивает страницу с клавиатуры, обслуживает window.scrollY / scrollTo, нормально делает печать и полностраничные скриншоты.
На мобильных от него ещё зависят схлопывание адресной строки, tap-to-top на iOS и pull-to-refresh.
Проблема в том, что отказаться от всего этого очень легко. Классический app shell:
html, body { height: 100%; overflow: hidden }
и потом height: 100vh; overflow: auto на wrapper — визуально страница продолжает совершенно нормально скроллиться, только теперь скроллится не документ, а вложенный контейнер. Ещё более неприятный вариант — сочетание height: 100% и overflow-x: hidden: из-за правил overflow body тоже может незаметно превратиться в scroll container.
Проверяется смешно просто: прокрутить страницу и посмотреть window.scrollY. Если там всё ещё 0, скроллится что-то другое. Автор дальше разбирает типичные случаи — full-height layout, fixed header/sidebar, горизонтальный overflow, блокировку скролла под modal — и показывает, как оставить основной скролл браузеру. Например, использовать min-height: 100svh вместо фиксированного 100vh, position: sticky вместо app shell с отдельным скроллом, а для обрезки горизонтального overflow — clip вместо hidden.
Ссылка ещё раз: The root scroller and how not to lose it
#css #scroll #root #appshell