Блог

ЦЕЛЬ

Чтобы в браузерах iOS отображалась очень длинная веб-страница, используйте привязку прокрутки CSS.

ПРОБЛЕМА

Моя собственная попытка и примеры, описанные в css-хитрости, работают, но они останавливают автоматическое сжатие адресной строки iOS и скрытие панели инструментов при прокрутке пользователем. Это значительная потеря экранной недвижимости на меньшем телефоне.

ТЕСТОВОЕ ОБОРУДОВАНИЕ

iOS 14.2, iPhone SE (1-го поколения). Safari, Chrome, Firefox.

ТЕСТОВЫЕ ПРИМЕРЫ

https://codepen.io/maxakohler/full/JBjROd
https://codepen.io/team/css-tricks/full/yLLqqgP
(оба написаны в этой статье: https://css-tricks.com/practical-css-scroll-snapping/)

ТЕСТОВЫЙ КОД

Родительский

 max-height: 100vh;
overflow-y: scroll;
scroll-snap-type: y proximity;
scroll-behavior: smooth;
 

Дети

 height: 1px;
background-color: transparent;
scroll-snap-align: end;
scroll-snap-stop: always
 

Большое спасибо. 1-й в истории пост по веб-разработке.