Как избежать «привязки прокрутки назад» на мобильном устройстве Chrome? ⇐ CSS

[Anonymous]

Я пытаюсь создать веб-сайт с тремя полными страницами, где пользователь плавно прокручивается между ними. Я использовал хакерское решение, найденное в Интернете, чтобы гарантировать, что эти страницы имеют соответствующую высоту (полную) независимо от того, видна ли адресная строка. Однако это означает, что высота страниц меняется при прокрутке, особенно когда адресная строка исчезает или появляется снова. Кажется (согласно этому вопросу, который диагностирует проблему, но не смог помочь мне решить ее) является источником проблемы, с которой я сталкиваюсь: иногда, когда я прокручиваю большую часть пути от третьего слайда до На втором или втором слайде к первому Chrome щелкает «назад» (несмотря на то, что вверх является более разумным вариантом).
Вот демо: https://robintruax.github.io/ Воспроизведение использование его на мобильном устройстве (проверено в Chrome) должно проиллюстрировать проблему.
Код (очень минимальный) находится здесь: https://github.com/RobinTruax/robintruax.github .io
Я не уверен, как избежать этой проблемы (я пытался найти решение в вопросе, но не смог его адаптировать) и хотел бы получить любую информацию.

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

let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

window.addEventListener('resize', () => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});

window.addEventListener('touchmove', () => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});

// Constants
book = document.querySelector(".book");
scrollbar = document.querySelector("#scrollbar");

// Scrollbar
book.addEventListener("scroll", () => {
// setTimeout(function(){
//     alert(scrollbar.style.height);
// }, 5000);
scrollbar.style.top = (window.innerHeight * book.scrollTop / book.scrollHeight).toString() + "px";
scrollbar.style.height = (window.innerHeight * window.innerHeight / book.scrollHeight).toString() + "px";
});

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

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
width: 100%;
overflow: hidden;
}

.book {
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
width: 100%;
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
/* Scrolling */
overflow-y: scroll;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}

.page {
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
width: 100%;
/* Scrolling */
scroll-snap-align: start;
scroll-snap-stop: always;
}

.book::-webkit-scrollbar {
width: 0px;
}

#p1 {
background-color: lightblue;
}

#p2 {
background-color: lightcyan;
}

#p3 {
background-color: lightgray;
}

/* Insert Custom Scrollbar */

#scrollbar {
/* Sizing */
height: 33.3vh;
height: calc(var(--vh, 1vh) * 33.3);
width: 6px;
/* Layout */
position: absolute;
top: 0%;
right: 0%;
/* Visual */
background-color: black;
border-radius: 1px;
}

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

Подробнее здесь: https://stackoverflow.com/questions/785 ... ome-mobile