Problemen mit dem Fenstercrollen für eine Animation im "Schiebetür" -Stil beheben, die von einem Scroll -Ereignis in Jav ⇐ CSS

[Anonymous]

Ich bin ein Noob bei Webdev und habe versucht zu lernen, indem ich eine Art Portfolio -Website zusammengestellt habe. Ich habe einige Beispiele von Menschen gesehen, die coole Auswirkungen auf ihre Zielseiten haben, und ich möchte etwas Ähnliches tun. Wirkung. Das heißt, nach dem Laden meiner Website möchte ich anstelle der Seite, anstatt die Seite zu scrollen, zwei Divs auseinander schieben und den Inhalt im Inhalt enthüllen. Die Menge, die die Türen zurückgezogen werden, sollte durch die Menge, die der Benutzer zu scrollen versucht hat (Maus, Geste und Scrollbar, die alle funktionieren) gesteuert werden sollte. Ich habe es etwas geschafft, dies zu erreichen, aber ich kann nicht herausfinden Dies ist eine einfache Sache und ich hätte JS ein bisschen mehr nachlesen sollen, bevor ich damit anfing, aber ich konnte nichts online darüber finden. Zumindest nicht im Noob-freundlichen Format. Ich werde das JavaScript auch hier einstellen: < /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>
Die beiden Türen sind die Topcover- und BottomCover -Divs, und sie zeigen beim Scrollen nach unten. < /p>
Das Problem hier Scrollen, damit der Benutzer nach dem Verschwinden der Türen wieder zum Inhalt scrollen muss. Darüber hinaus funktioniert dieses Ganze nur, wenn genügend Inhalte vorhanden sind, um die Seite zu überfließen, da sie vom Scroll -Ereignis abhängt. Das ist kein Problem für meinen Anwendungsfall, aber ich habe immer noch das Gefühl, dass es ein Mangel an meinem Ansatz ist. Ich habe stattdessen versucht, das Rad -Ereignis zu verwenden, und das gab mir ein gutes Ergebnis, um zu verhindern, dass der Hintergrund scrollen (da die Standardaktion abgebrochen werden kann, während Scrollen anscheinend nicht kann), aber der einzige Weg, um in diesem Fall eine reibungslose Animation zu haben ist mit Gesten zu scrollen, da gekerbte Mausräder wahnsinnig hohe Deltay -Werte liefern, die den Effekt wirklich abgehackt machten. Auch wenn ich mir einen Weg vorstellen könnte, um dies zu beheben, berücksichtigt das Rad -Ereignis nicht für die Bildlaufleiste, die die Seite bewegt Wie ich dieses Problem beheben kann, wäre sehr geschätzt, ich bin mir nicht sicher, ob ich es nur noch kompliziere. Ich würde es vorziehen, mich nur an Vanille JavaScript und CSS zu halten, wenn dies vernünftig ist.