2016-01-14 4 views
14

Ich habe eine Frage bezüglich Fangpunkte in CSS (resource, browser-support). Ich möchte ganz normal durch den ganzen Körper blättern bis zu einem späteren "versteckten" Abschnitt. Wenn der Benutzer zum unteren Teil des zweitletzten Abschnitts scrollt, sollte das Ansichtsfenster mit dem unteren Rand dieses Abschnitts (gleich dem oberen Rand des letzten Abschnitts) einrasten. Wenn der Benutzer versucht, durch diesen einen Snap zu blättern, sollte dies nur möglich sein, indem ein bestimmter Schwellenwert überwunden wird.Einzel-Scroll-Fangpunkt mit unterem Ansichtsfenster vor dem letzten Abschnitt der Seite

Ich habe mein Problem zum besseren Verständnis visualisiert, ich hoffe sehr, dass dies mit der aktuellen Spezifikation der Fangpunkte möglich ist.

enter image description here

+0

http://caniuse.com/#search=snap –

+0

Würden Sie eine Antwort akzeptieren, die andere Sprachen enthält? –

+0

Wenn Sie eine funktionierende Geige oder ein Schnipsel bereitstellen können, natürlich :) @FaustoNA – wottpal

Antwort

4

Dies ist so weit ich pagePiling schöne Bibliothek bekommen konnte es mit Alvaro Trigo suchen:

<div id="pagepiling"> 
    <div class="section pp-scrollable" id="section1"> 
     <p>Content that scrolls normally</p> 
    </div> 

    <div class="section" id="hidden"> 
     <p>Not scrollable</p> 
    </div> 

    <div class="section pp-scrollable" id="section2"> 
     <p>Content that scrolls normally again</p> 
    </div> 

</div> 

Die Mitte:

http://codepen.io/anon/pen/NxaeZm

Der Inhalt wie so organisiert ist, Abschnitt entführt das Scrollen und danach können Sie weiter zum zweiten Abschnitt scrollen , die wieder wie eine normale Seite scrollt. Ich konnte keinen Schwellenwert für den Zugriff auf den mittleren Abschnitt hinzufügen. Ich überlasse es dir dort. Viel Glück!

Verwandte Themen