How to use scroll snap over a number of items per scroll-CodePudding

So i'm trying to do this without any javascript. I want make it so that when i scroll, it scrolls over 4 (or multiple) items in a container. is that possible?

To make it easier to understand, here's

.scrollers {
  width: 100%;
  max-width: calc((150px   2rem) * 4);
  height: 150px;
  margin: 0 auto;
  scroll-snap-type: x mandatory;
  display: flex;
  gap: 3rem;
  overflow-y: hidden;
  overflow-x: scroll;
  border: 1px solid black;
  box-sizing: border-box;
}

.scrollers.multiple {
  /* Ideas ?   */
}

/* normal scroll */
.scrollers .box {
  width: 150px;
  height: 150px;
  aspect-ratio: 1/1;
  background-color: red;
  border: 1px solid black;
  scroll-snap-align: start;
}

Code pen explanation: Codepen

CodePudding user response：

Alright so i've figured it out. The trick is to target the child elements you want the snapping to happen on and apply the snap css stylings. In my case, i needed it to be over 4 elements so i'll target :nth-of-type(4n 1). 1 is because it's zero based.

when we apply scroll-snap-align: start; and scroll-snap-stop: always; on only those elements. it forces the scroll snapping on them.

TL;DR,

.scrollers.multiple .box:nth-of-type(4n   1) {
  scroll-snap-stop: always;
  scroll-snap-align: start;
}

Note: other child elements should not have the scroll-snap-align set.