Doppelte Bildlaufleisten

Question

Ich habe diese JSFIDDLE mit einem Parallax-Effekt auf meine Bilder. Das Problem ist, dass ich zwei Bildlaufleisten im Ergebnis habe. Wie kann ich nur eine Bildlaufleiste für alle meine Inhalte haben?

HTML:

<div id="intro"> 
<p>Sed uelit, sed quia...</p> 
</div> 

<div id="text"> 
<h1>Hello</h1> 
</div> 
<div id="wrapper"> 
    <section id="frame1"> 
     <div class="back"> 
     </div> 
    </section> 


     <section id="frame7"> 
     <div class="back"> 

     </div> 
    </section> 

</div> 

Answer 1

Die zweite Scrollbar auf #wrapper wegen der Standard-Box-Modell Verhalten zeigt sich und es ist 3px Grenze. Um dies zu beheben, können Sie box-sizing:border-box; der #wrapper zuweisen und der Rahmen wird innerhalb #wrapper beschränkt werden. https://jsfiddle.net/qrsotzpr/9/

Answer 2

Sie overflow: hidden; auf body, Live-Beispiel verwenden:

https://jsfiddle.net/k5zwqvjd/

Der Überlauf-Eigenschaft gibt an, ob der Inhalt Clip, machen Bildlaufleisten oder nur Inhalte angezeigt werden, wenn er überläuft seinen Blockebene Behälter .

Sie können mehr here lesen.

body { 
    overflow: hidden; 
    margin: 0; 
} 

Answer 3

könnten Sie Überlauf verwenden: hidden; in #wrapper

#wrapper { 

     transform-style: preserve-3d; 
     height: 100%; 
     perspective: 1px; 
     overflow: hidden; 
     border:3px solid cyan; 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 

    }