Scrolling screens and pages

by laustdeleuran

HTML

<div class="app">
    <div class="app-screen">
        <img src="http://placehold.it/300x300&text=M" alt="" />
    </div>
    <div class="app-screen">
        <img src="http://placehold.it/300x300&text=H" alt="" />
    </div>
    <div class="app-screen">
        <div class="app-page">
            <img src="http://placehold.it/300x300&text=S1" alt="" />
            <img src="http://placehold.it/300x300&text=S2" alt="" />
            <img src="http://placehold.it/300x300&text=S3" alt="" />
        </div>
    </div>
</div>

SCSS

// Base
html,
body {
    color: #111;
    font-family: Roboto, Helvetica, Helvetica Neue, Arial, sans-serif;
    
    background: #eee;
}
// App
.app {
    overflow: hidden;
    
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    
    .app-screen {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
}