2D css滚动单元

Question

我尝试在2D滚动窗口中使用CSS scroll-snap，但它在X方向上不起作用。知道怎么解决这个问题吗？

​

.scroll-y,
.scroll-x,
.box {
  height: 100px;
  font-size: 80px;
  color: white;
}

.scroll-y {
  overflow: auto;
  scroll-snap-type: y proximity;
  max-width: 100px;
  margin: 0 auto;
  border: 5px solid #666
}

.scroll-x{
  scroll-snap-type: x proximity;
  scroll-snap-align: start;
  display: flex;
  overflow: auto;
  min-width: 200px;
}

.box {
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  background: coral
}

.scroll-x:nth-child(even) .box:nth-child(even),
.scroll-x:nth-child(odd) .box:nth-child(odd){
  background: gold
}

<div class="scroll-y">
  <div class="scroll-x">
      <div class="box">1</div>
      <div class="box">2</div>
  </div>
  <div class="scroll-x">
      <div class="box">3</div>
      <div class="box">4</div>
  </div>
  <div class="scroll-x">
      <div class="box">5</div>
      <div class="box">6</div>
  </div>
  <div class="scroll-x">
      <div class="box">7</div>
      <div class="box">8</div>
  </div>
  <div class="scroll-x">
      <div class="box">9</div>
      <div class="box">10</div>
  </div>
</div>

​

Answer 1

我找到了解决办法。没有必要将每一行分开，并将它们放在另一个div中。scroll-snap-type对x和y都使用both。

​

* {
  text-align: center;
  box-sizing: border-box;
}

.scroll,
.container,
.box {
  height: 100px;
  font-size: 80px;
  color: white;
}

.scroll {
  overflow: auto;
  scroll-snap-type: both mandatory;
  max-width: 100px;
  margin: 0 auto;
  border: 5px solid #666
}

.container{
  min-width: 300px;
}

.box {
  scroll-snap-align: start;
  float: left;
  text-align: center;
  width: 100px;
  background: coral;
}

.box:nth-child(odd){
  background: gold
}

<div class="scroll">
  <div class="container">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">7</div>
      <div class="box">8</div>
      <div class="box">9</div>
      <div class="box">10</div>
  </div>
</div>

Scroll in both directions inside the box:

​