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

[Anonymous]

Я ноду в WebDev, и я пытался учиться, собрав какой -то тип веб -сайта портфеля. Я видел несколько примеров людей, которые имеют крутые последствия на их целевые страницы, и я хочу сделать что -то подобное. эффект. Это означает, что при загрузке моего сайта вместо прокрутки страницы я хотел бы, чтобы два DIV раздвинули, раскрывая содержание внутри. Сумма, которую двери получают обратно, должна контролироваться суммой, которую пользователь пытался прокрутить (мышь, жест и прокрутка, все должны работать). Мне несколько удалось достичь этого, но я не могу понять, как заставить контент на странице оставаться статичным, пока пользователь прокручивает, чтобы открыть двери. < /P>
может быть Это простая вещь, и я должен был прочитать о JS немного больше, прежде чем начать это, но я не смог найти что -либо в Интернете об этом. По крайней мере, не в нулевом формате. Я также помесчу JavaScript: < /p>
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)

}
}

< /code>
Две двери - это DOV в верхней части и нижней части, и они показывают при прокрутке вниз. < /p>
Проблема здесь заключается Свитки, поэтому пользователю придется прокручивать контент после ухода дверей. Кроме того, все это работает только в том случае, если есть достаточно контента, чтобы переполнить страницу, поскольку это зависит от события прокрутки. Это не проблема для моего варианта использования, но я все еще чувствую, что это недостаток моего подхода. Вместо этого я попытался использовать колесное событие, и это дало мне хороший результат в предотвращении прокрутки фона (потому что действие по умолчанию может быть отменено, в то время как прокрутка, очевидно, не может), но единственный способ иметь плавную анимацию в этом случае это прокручивать жестами, поскольку нарезанные мышиные колеса дают безумно высокие значения Deltay, которые сделали эффект действительно изменчивым. Даже если бы я мог подумать о том, как это исправить, на колесе не учитывается, что прокрутка перемещает страницу, так что это на самом деле не работает для меня. < /P>
Любая помощь с Как решить эту проблему было бы очень оценено, я не уверен, что я просто усложняю ее. Я бы предпочел придерживаться только ванильного JavaScript и CSS для этого, если это разумно.

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