Исправление проблем с прокруткой окна для анимации в стиле «раздвижная дверь», управляемой событием прокрутки в JavaScri ⇐ CSS

[Anonymous]

Я новичок в веб-разработке и пытаюсь научиться этому, создавая какой-нибудь веб-сайт-портфолио. Я видел несколько примеров людей, которые создают классные эффекты на своих целевых страницах, и я хочу сделать что-то подобное.
В частности, я пытаюсь придумать, как создать «раздвижную дверь». эффект. Это означает, что при загрузке моего сайта вместо прокрутки страницы я бы хотел, чтобы два элемента div раздвигались, открывая содержимое внутри. Степень, на которую двери отодвигаются, должна контролироваться тем, насколько пользователь пытался прокрутить (мышь, жесты и полоса прокрутки — все должно работать). Мне в некоторой степени удалось этого добиться, но я не могу понять, как заставить контент на странице оставаться статическим, пока пользователь прокручивает страницу, чтобы открыть двери.
Может быть это простая вещь, и мне следовало бы немного больше прочитать о JS, прежде чем начинать это, но я не смог найти ничего об этом в Интернете. По крайней мере, не в формате, удобном для новичков.
У меня есть демо-версия того, что я пробовал до сих пор в этом jsfiddle, так как я не мог разобраться с фрагментами. Я также помещу сюда JavaScript:

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

window.addEventListener("scroll", handleScroll, {
passive: false
});

let scrollPosition = 0;
const topCover = document.getElementById("top-cover");
const bottomCover = document.getElementById("bottom-cover");

function handleScroll(e) {

e.preventDefault();

scrollPosition = window.scrollY;
const maxScroll = window.innerHeight / 2;

if (scrollPosition < 0) scrollPosition = 0;

topCover.style.transform = `translateY(-${scrollPosition}px)`;
bottomCover.style.transform = `translateY(${scrollPosition}px)`;

if (scrollPosition >= maxScroll) {
cover.style.display = "none";
window.removeEventListener('scroll', handleScroll)

}
}

Две двери — это элементы div topCover и BottomCover, и они открываются при прокрутке вниз.
Проблема здесь в том, что содержимое в фоновом режиме по-прежнему прокручивается, поэтому пользователю придется прокручивать обратно содержимое после того, как двери исчезнут. Кроме того, все это работает только в том случае, если контента достаточно для переполнения страницы, поскольку это зависит от события прокрутки. Для моего варианта использования это не проблема, но я все равно чувствую, что это недостаток моего подхода. Вместо этого я попробовал использовать событие колеса, и это дало мне хороший результат в предотвращении прокрутки фона (поскольку действие по умолчанию можно отменить, а прокрутку, по-видимому, нельзя), но в этом случае это единственный способ получить плавную анимацию заключается в прокрутке с помощью жестов, поскольку зубчатые колесики мыши дают безумно высокие значения deltaY, из-за чего эффект становится очень прерывистым. Даже если бы я мог придумать способ это исправить, событие колеса не учитывает перемещение полосы прокрутки по странице, поэтому у меня это не работает.
Любая помощь с как решить эту проблему, я был бы очень признателен, я не уверен, что я слишком усложняю ее. Я бы предпочел использовать только ванильный JavaScript и CSS, если это разумно.

Подробнее здесь: https://stackoverflow.com/questions/786 ... on-control