Scroll 畫面滾動設計

<div class="scroll-container">
<section>
<h2>Section 1</h2>
</section>
<section>
<h2>Section 2</h2>
</section>
<section>
<h2>Section 3</h2>
</section>
<section>
<h2>Section 4</h2>
</section>
</div>

CSS 內容

* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: ‘Helvetica’, sans-serif;
}

/* All the snapping stuff */
.scroll-container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}

section {
height: 100vh;
scroll-snap-align: center;
}

/* Other styles */
section {
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
background-color: darkorchid;
}

section:nth-child(2n) {
background-color: turquoise;
}

section:nth-child(3n) {
background-color: tomato;
}

橫向滾動

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Helvetica', sans-serif;
}

/* All the snapping stuff */
.scroll-container {
    width: 70vw;
    height: 70vh;
    max-height: 30rem;
    margin: 3rem auto;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}

section {
    height: 100%;
    flex: 0 0 100%;
    scroll-snap-align: center;
}

/* Other styles */
section {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: darkorchid;
    text-align: center;
}

section:nth-child(2n) {
    background-color: turquoise;
}

section:nth-child(3n) {
    background-color: tomato;
}