如何在包装容器的情况下使用滚动捕捉？

Question

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.

Answer 1

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>