Прокрутите адресную строку браузера, прежде чем взаимодействовать с прокручиваемыми областями на мобильном устройстве. ⇐ CSS

[Anonymous]

Мне нужна страница с примерно таким макетом:

Код: Выделить всё

... 

 
... 
... 


... 

Для этого у меня есть настройка в прилагаемом фрагменте кода. Фрагмент работает должным образом в настольном браузере. Панель навигации и нижний колонтитул всегда видны, а прокручиваемые страницы при прокрутке привязываются к следующей странице.
Однако в мобильных браузерах пользовательский опыт наличия статической адресной строки не ощущается прямо мне. В мобильных браузерах я обычно прокручиваю страницу немного вниз, чтобы сначала скрыть верхнюю адресную строку, а затем начинаю читать содержимое страницы. Однако, поскольку большая часть моего веб-сайта представляет собой прокручиваемую область с таким макетом, вы пролистываете страницы карусели вместо того, чтобы прокручивать адресную строку. Адресная строка скрывается только при прокрутке за пределы области прокрутки (на панели навигации или в нижнем колонтитуле). Это также происходит, когда вы нажимаете на нижнюю страницу и больше нет прокручиваемого контента.
Можно ли изменить это поведение таким образом, чтобы пользователь сначала прокручивал адресную строку - предоставить пользователям возможность просматривать веб-сайт в полноэкранном режиме - и затем, если они прокрутят дальше, начнут прокручивать страницы карусели?
Я думаю, что это может быть в отличие от ожидаемого поведения прокручиваемых областей, но мне кажется, что для этого конкретного дизайна веб-сайта это более интуитивно понятно, поскольку прокручиваемая область занимает всю страницу, а не небольшой контейнер, который прокручивает некоторые изображения.

Код: Выделить всё

.carousel {
display: inline-flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
background: blue;
}

.carousel-vertical {
display: flex;
flex-direction: column;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}

.carousel-item {
box-sizing: content-box;
display: flex;
flex: none;
scroll-snap-align: start;
}

Код: Выделить всё

Nav


a
b



Footer

Подробнее здесь: https://stackoverflow.com/questions/783 ... e-areas-on