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

Question

如何在下一个代码中使用scroll-snap属性？：

.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>

我可以在这个示例代码中删除.wrapper，但我的实际代码不允许我这样做。

Answer 1

这就是您想要的吗？

.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>