htmlcsscarouselscroll-snap

How can I use scroll snap with container wrapped?

How can I use scroll-snap property on the next code?:

.wrapper {
  width: 100px;
  height: 100px;
  overflow: scroll;
}

.wrapper > div {
  width: 300px;
  height: 100px;
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: black 1px dotted;
}
<div class="wrapper">
  <div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</div>

I can just remove .wrapper on this example code, but my actual code don't let me do that.

Solution

  • is this what you're looking for?

    .wrapper {
  width: 100px;
  height: 100px;
  overflow: scroll;
  scroll-snap-type: x mandatory;
}

.wrapper > div {
  width: 300px;
  height: 100px;
  display: flex;
  
}

.item {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: black 1px dotted;
  scroll-snap-align: start;
}
    <div class="wrapper">
  <div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</div>