Probleme mit skrollr auf Element mit Überlauf: blättern

Ich versuche, eine nette einzelne Seite mit einigen Animationen mit Hilfe von skrollr zu machen. Für ein sehr einfaches Beispiel gibt es drei Rutschen, werden die Objektträger nur bei 100% Breite und Höhe positionieren fixiert ist, hat die letzten einen Überlauf: Auto auf, so kann man ihren Inhalt blättern, die keine Animation benötigt und möglicherweise nicht brauche mehr als 100% Höhe z. über, kontaktieren Sie uns und Fußzeilen.Probleme mit skrollr auf Element mit Überlauf: blättern

Mein Verständnis ist, dass ich skrollr können auf ein Element Opazität 0 oder eine Anzeige keine einzustellen. Der erste und der zweite haben einen höheren Z-Index als der dritte, so dass die ersten zwei den dritten automatisch erscheinen lassen.

ich jQuery verwendet, dass es funktioniert und der dritte Behälter zeigt

$('.slide1, .slide2').css('opacity', 0);

zu bestätigen, während der Rest nicht sichtbar sind. Mit Skrollr jedoch scrollt es in allen anderen Browsern, aber ff, wie beabsichtigt mit dem Trackpad auf meinem Macbook, scrollt aber nicht, wenn die Bildlaufleiste des Browsers verwendet wird. es verhält sich, als wäre es im Überlauf: versteckt.

skrollr.init();

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
section { 
 
    color: #fff; 
 
    padding: 25px; 
 
} 
 

 
header { 
 
    position: fixed; 
 
    z-index: 8; 
 
} 
 

 
.slide1, 
 
.slide2, 
 
.slide3 { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.slide1 { 
 
    z-index: 7; 
 
    background: green; 
 
} 
 

 
.slide2 { 
 
    z-index: 6; 
 
    background: blue; 
 
} 
 

 
.slide3 { 
 
    z-index: 5; 
 
    background: yellow; 
 
    overflow: scroll; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head></head> 
 
    <body> 
 
     <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script> 
 

 

 
     <header></header> 
 
     <main> 
 
      <section class="slide1" 
 
       data-anchor-target="header" 
 
       data-start="display: block" 
 
       data-100p-start="display: none"> 
 
       Slide 1<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
      </section> 
 
      <section class="slide2" 
 
       data-anchor-target="header" 
 
       data-100p-start="display: block" 
 
       data-200p-start="display: none"> 
 
       Slide 2<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
      </section> 
 
      <section class="slide3" 
 
       data-anchor-target="header" 
 
       data-200p-start="display: block" 
 
       data-500p-start="display: block"> 
 
       Slide 3<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
       scroll?<br /> 
 
      </section> 
 
     </main> 
 
    </body> 
 
</html>

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

Bug? nicht wofür es gedacht war? einfacher Weg dies zu tun? Problemumgehungen? Ich möchte nicht in eine separate Bibliothek schauen müssen, nur um das Gleiche zu tun.

Quelle

2016-06-08 archytect

Das Problem, das ich bei der Überprüfung in Chrome, FF und Safari sehe, ist, dass wenn die Bildlaufleiste die 3. Folie erreicht, nur der Inhalt dieser Folie gescrollt wird. Daher scrollt die Scrollbar-Funktionalität nur innerhalb dieses Containers (wenn das Trackpad nicht verwendet wird).

Edit: da die dritten Schlitten unabhängig scrollbare sein müssen, kann es nicht position: fixed sein. Stattdessen werden wir es machen absolute wie so:

.slide3 { 
    position: absolute; 
    top: 200%; 
    left: 0; 
    height: auto; 
    width: 100%; 
}

Und die skrollr Definitionen auf der Folie entfernen, wie gut. Da es relativ zu dem Körper positioniert ist, können wir die top: 200% Eigenschaft hinzufügen und wissen, dass es einmal die ersten beiden Abschnitte 100% Scrollen fertig sind angezeigt. Dies ermöglicht auch die Verwendung der Bildlaufleiste durch die vollständige Animationssequenz.

Hier ist ein mit diesen beiden Korrekturen hinzugefügt codepen aktualisiert:

http://codepen.io/thecox/pen/PzPxYo

Lassen Sie mich wissen, wenn Sie versuchen, etwas anderes zu tun, und ich kann einige zusätzliche Informationen hinzuzufügen.

Quelle

2016-06-08 07:57:20

Ich brauche den dritten Behälter scrollbaren zu sein. Es wird für einige Komponenten einschließlich über uns, kontaktieren Sie uns, und eine Fußzeile, die mehr als 100% der Seite sein wird, die keine Animationen benötigen. – archytect

Großartig, danke für die Aufklärung! Ich habe meine Antwort/Codepen aktualisiert, um zu erreichen, wonach Sie suchen. –

genial. Was hast du geändert? die Höhe? Es funktioniert in allen Browsern mit Ausnahme von Chrome – archytect

Probleme mit skrollr auf Element mit Überlauf: blättern

Antwort

Verwandte Themen