Wie führe ich einen Seitenwechsel unter einem festen Container durch?

Question

die Frage ist ein bisschen komplexer als der Titel beschreiben kann. Ich versuche, etwas wie dieses zu machen:

Es gibt ein ein Seitenlayout mit Inhaltsabschnitten. Jeder Abschnitt ist 100vh, einige von ihnen sind größer. Wenn der Benutzer nach unten scrollt oder eine Animation durchstreicht, wird er in einen nächsten Abschnitt verschoben. Wenn in einem höheren Abschnitt der Benutzer frei scrollt, außer an den Grenzen des Abschnitts, dann tritt eine Animation auf.

Ich habe eine Idee, dass die Bildlaufleiste des Browsers etwas von einem Controller sein sollte, das heißt es sollte einen Positionswert angeben, der von JS in die richtige Animation übersetzt würde. Ich habe einen fest positionierten Container mit den Abschnitten über dem Seitenkörper erstellt, dessen Höhe auf die gesamte Abschnittshöhe eingestellt ist, sodass die Bildlaufleiste geeignete Werte anzeigt.

Das Problem ist, ich denke, ich will nicht die Bildlaufleiste sichtbar sein, weil es ein kleines Paradox macht, wenn Sie es ziehen. Außerdem wird etwas Inhalt mit einer eigenen Bildlaufleiste von der Seite her einschieben. Ich denke, ich kann die Bildlaufleiste ausblenden, indem Sie ein paar Tricks tun, wenn die Bildlaufleiste in einem div, nicht Fenster ist, aber es sieht aus wie wenn ein fester Container in einem Container mit einer Bildlaufleiste die Bildlauf nicht passiert, wenn die Maus über dem festen ist Container.

So jetzt bin ich stecken zwischen eine Fenster Bildlaufleiste und nicht wirklich in der Lage, über feste Container scrollen. Ich würde jede Hilfe so sehr schätzen. Prost!

einige html nur für codepen Links zu arbeiten:

<div class="fixed"> 
    <div class="section-container"> 
    <div class="section"><h1>section 1</h1></div> 
    <div class="section"><h1>section 2</h1></div> 
    <div class="section"><h1>section 3</h1></div> 
    </div> 
</div> 

codepen example with body scroll

codepen example with container scroll

Answer 1

Sie haben Scroll-Fest vor, so dass es, wenn Sie oder es ist nicht scrollen spielt keine Rolle fest Sie können also nicht nur über den festen Bereich scrollen.