如何使用带包装容器的滚动快照？

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>

​