Cannot change horizontal scroll snap into vertical scroll snap

Question

I've found this codepen, but It was Horizontal. When I was trying to make it vertical, it did not work.

Pen I found the code on:

// None!

/* Hide the scroll bars */

body {
  overflow-y: hidden;
}

.slides {
  /* We set the scroll snapping */
  scroll-snap-type: x mandatory;
  /* Necessary for mobile scrolling */
  -webkit-overflow-scrolling: touch;
  /* For layout purposes */
  display: flex;
  /* To allow horizontal scrolling */
  overflow-x: scroll;
}

section {
  /* For styling purposes */
  height: 100vh;
  min-width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* Set where the snapping should happen */
  scroll-snap-align: start;
}


/* Styling for the sections */

section h2 {
  font-family: system-ui, sans-serif;
  font-size: 2rem;
  color: #1a1a1a;
  font-weight: 100;
}

section h3 {
  font-family: system-ui, sans-serif;
  font-size: 2rem;
  color: #ffffff;
  font-weight: 100;
}

.section-1 {
  background-image: url('https://images.unsplash.com/photo-1524260855046-f743b3cdad07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1401&q=80')
}

.section-2 {
  background-image: url('https://images.unsplash.com/34/BA1yLjNnQCI1yisIZGEi_2013-07-16_1922_IMG_9873.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')
}

.section-3 {
  background-image: url('https://images.unsplash.com/photo-1500964757637-c85e8a162699?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1378&q=80')
}

.section-4 {
  background-image: url('https://images.unsplash.com/photo-1501791330673-603715379ded?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')
}

<main class="slides">
  <section class="section-1">
    <h2>Scroll right to see it in action 👉</h2>
  </section>
  <section class="section-2">
    <h3>Woah! That's a cool effect!</h3>
  </section>
  <section class="section-3">
    <h2>And no Javascript! 🤓</h2>
  </section>
  <section class="section-4">
    <h3>How cool is that?</h3>
  </section>
</main>

What I tried to change horizontal scroll snap into vertical scroll snap:

// None!

/* Hide the scroll bars */

body {
  overflow-x: hidden;
}

.slides {
  /* We set the scroll snapping */
  scroll-snap-type: y mandatory;
  /* Necessary for mobile scrolling */
  -webkit-overflow-scrolling: touch;
}

section {
  /* For styling purposes */
  height: 100vh;
  min-width: 100vw;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* Set where the snapping should happen */
  scroll-snap-align: start;
}


/* Styling for the sections */

section h2 {
  font-family: system-ui, sans-serif;
  font-size: 2rem;
  color: #1a1a1a;
  font-weight: 100;
}

section h3 {
  font-family: system-ui, sans-serif;
  font-size: 2rem;
  color: #ffffff;
  font-weight: 100;
}

.section-1 {
  background-image: url('https://images.unsplash.com/photo-1524260855046-f743b3cdad07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1401&q=80')
}

.section-2 {
  background-image: url('https://images.unsplash.com/34/BA1yLjNnQCI1yisIZGEi_2013-07-16_1922_IMG_9873.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')
}

.section-3 {
  background-image: url('https://images.unsplash.com/photo-1500964757637-c85e8a162699?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1378&q=80')
}

.section-4 {
  background-image: url('https://images.unsplash.com/photo-1501791330673-603715379ded?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')
}

<main class="slides">
  <section class="section-1">
    <h2>Scroll down to see it in action 👉</h2>
  </section>
  <section class="section-2">
    <h3>Woah! That's a cool effect!</h3>
  </section>
  <section class="section-3">
    <h2>And no Javascript! 🤓</h2>
  </section>
  <section class="section-4">
    <h3>How cool is that?</h3>
  </section>
</main>

I tried changing all the x's to y's, all y's to x's, and different combinations, but I still can't find a solution.

Tarentarentum

Answer 1

Your parent element doesn't have a fixed height and expands to fit the children. On top of that, you also need to set overflow-y: scroll; for parent element:

// None!

/* Hide the scroll bars */

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.slides {
  /* We set the scroll snapping */
  scroll-snap-type: y mandatory;
  /* Necessary for mobile scrolling */
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-flow: column;
  /* hide horizontal overflow */
  overflow-x: hidden;
  /* allow vertical overflow */
  overflow-y: scroll;
  /* set the height for parent, overwise it will expand to fit children */
  height: 100vh;
}

section {
  /* For styling purposes */
  display: flex;
  min-height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* Set where the snapping should happen */
  scroll-snap-align: start;
}


/* Styling for the sections */

section h2 {
  font-family: system-ui, sans-serif;
  font-size: 2rem;
  color: #1a1a1a;
  font-weight: 100;
}

section h3 {
  font-family: system-ui, sans-serif;
  font-size: 2rem;
  color: #ffffff;
  font-weight: 100;
}

.section-1 {
  background-image: url('https://images.unsplash.com/photo-1524260855046-f743b3cdad07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1401&q=80')
}

.section-2 {
  background-image: url('https://images.unsplash.com/34/BA1yLjNnQCI1yisIZGEi_2013-07-16_1922_IMG_9873.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')
}

.section-3 {
  background-image: url('https://images.unsplash.com/photo-1500964757637-c85e8a162699?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1378&q=80')
}

.section-4 {
  background-image: url('https://images.unsplash.com/photo-1501791330673-603715379ded?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')
}

<main class="slides">
  <section class="section-1">
    <h2>Scroll down to see it in action 👉</h2>
  </section>
  <section class="section-2">
    <h3>Woah! That's a cool effect!</h3>
  </section>
  <section class="section-3">
    <h2>And no Javascript! 🤓</h2>
  </section>
  <section class="section-4">
    <h3>How cool is that?</h3>
  </section>
</main>

Other css properties were added for aestetics only, feel free to ignore.

Temperamental

Is it possible to snap while you are scrolling? The same as the one I found in the pen except virtical. – Tarentarentum

It already does that, might be not very obvious on small result display. Check the answer in Full page (small link which appears next to the buttons when you run code snippet) – Temperamental

I clicked full page, the the problem still remains. – Tarentarentum

I see what you mean now. It works the way you want in Firefox, but not Chrome. Let me check. – Temperamental

The behaviour of Chrome has already been discussed here -> #56629624 – Temperamental