CSS Scroll Snapping, Vertical Not Working

CSS Scroll Snapping, vertical not working

The major problem in the code snippet is that the displayed scrollbar belongs to the body, where no scroll-snap properties have been defined. This is why you do not have any snapping behaviour when scrolling.

To achieve your expected result, you need to

1. Be sure that the displayed scrollbar belongs to the parent div
2. Define the overflow behaviour to the parent container to scroll

Below is a working sample

As a note, consider that snapping properties (for Chrome) have evolved, and that you are using deprecated features. See the CSS scroll snap on Google developers.

Note also that this answer deals only with Chrome, without the polyfill part. It is just the main scroll concept that is involved here.

html,
body {
  height: 100vh;
  overflow: hidden;
}

.parent {
  overflow: scroll;
  height: 100vh;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
}

section {
  height: 100vh;
  scroll-snap-align: start;
  position: relative;
}

.one {
  background-color: red;
}

.two {
  background-color: blue;
}

.three {
  background-color: grey;
}

.four {
  background-color: green;
}

<div class="parent row">
  <section class="one"></section>
  <section class="two"></section>
  <section class="three"></section>
  <section class="four"></section>
</div>

How to correctly setup Vertical scroll snap css

Just reading the Mozilla docs on this makes it seem like this feature is highly inconsistent between browsers, but following their guide I managed to make your snippet work with these changes:

body .content {
  height: 100vh; /* was 100% */
  overflow: auto; /* added */
}

body {
  width: 100%;
  margin: 0;
  background-color: white;
}

body .content {
  width: 100vw;
  height: 100vh;
  scroll-snap-points-y: repeat(300px);
  scroll-snap-type: y mandatory;
  scroll-snap-type: mandatory;
  overflow: auto;
}

body .content section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  border: 1px solid black;
  scroll-snap-align: start;
}

<div class='content'>
  <section>1</section>
  <section>2</section>
  <section>3</section>
  <section>4</section>
</div>

Scroll-snap not working. I have looked up the existing questions and none of them helped

There are two mistakes you made and there are some improvements needed in your CSS

1. Do not apply scroll-snap-type to the body tag, rather make a container and apply this property to the container.

2. scroll-snap-align does not work on the parent container, it works on a child only

Improvements:

1. Added scroll-snap-type: y mandatory; so, it will vertically snap the elements
2. Set overflow-y: scroll to make vertical scrolling possible
3. Also set max-height to the container.

So I tried it on codepen here's CSS:

.container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    max-height: 100vh
}

img {
    height: 100vh;
    scroll-snap-align: start;
}

Here's the working pen link

I hope this clears your query.

No scroll snap with scroll-snap-type and -align / Simple Example not working Chrome/Firefox /

As it turns out, scroll-snap-type requires that you define a height for the container. I am not exactly sure how to explain why it is required, however, defining a height does take care of the issue.

.img {
  margin: 10px 5px;
  scroll-snap-align: center;
  -webkit-overflow-scrolling: touch;
}

.container {
  display:  grid; 
  justify-content: center; 
  grid-gap: 10px;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}

Scroll-snapping Dosent work when i have scroll-snap-type: y; on body tag

I'd try to make sure all elements inside the scroll-snap are the same, ie <div>[lots of other divs]</div>, alternatively, try not to use the body as a wrapper and see if that helps.

Here is a doc with better explanation

Edit: I tested it out and the size of the wrapper needs to be the same size as its children, you can disregard the rest of the stuff I said but I still wouldn't suggest using the body as a wrapper next time.

---

Related Topics