Недавно я заметил, что приложение, над которым я работаю, отображает очень противоречивое поведение при прокрутке на Chrome Android. Желаемое поведение заключается в том, что прокрутка вверх сразу скрывает адресную строку, а прокрутка вниз толкается обратно в окно просмотра. В моем случае для прокрутки адресной строки требуется некоторая прокрутка. После этого все работает как задумано. (См. Прилагаемую демонстрационную версию GIF). Мне было указано, что я пытаюсь использовать более длинный контент, но независимо от того, сколько времени он занимает, для запуска слайда требуется произвольное количество прокрутки.
Я действительно хочу понять, что здесь происходит. Я видел, как сайты появляются, как только появляется первая прокрутка, и другие сайты с тем же поведением, которое я описал ранее. Было бы неплохо узнать, какие триггеры скользят, чтобы соответственно планировать контент.
Демонстрационный пример неудачной прокрутки
А вот и упрощенный код
В этой демонстрации я попытался поменять% с vh, удалив явный размер, установив overflow-y:scroll но на самом деле ничего не помогло
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css" integrity="sha256-WAgYcAck1C1/zEl5sBl5cfyhxtLgKGdpI3oKyJffVRI=" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
<title>Scroll Like A Swan</title>
</head>
<body>
<div id="wrapper">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, rerum fuga corporis reprehenderit voluptate aperiam temporibus. Sequi vel nemo et molestias nihil, culpa quas recusandae fugiat, porro magnam accusamus? Sint maxime excepturi ipsam delectus ea rem perferendis mollitia adipisci! Impedit!
</div>
</body>
</html>
body{
background-color: yellow;
overflow-y: auto;
height: 100%;
}
#wrapper{
display: block;
background-color: orangered;
position: relative;
}