无论滑动速度如何，每一次滑动只有一个部分。

Question

我有一个水平滚动容器，在其上应用CSS scroll-snap属性。但是，当我快速地向右滑动时，可以跳过从第一节直接跳到第三节，而不需要停留在第二节。

是否有一种方法可以只为每一次滑动而滑动的一个区段，而不管滑动速度

​

.slider {
  border: 4px solid black;
  width: 300px;
  height: 200px;
  overflow: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(10, 100%);
  scroll-snap-type: both mandatory;
}

.slider::-webkit-scrollbar {
  height: 0;
}

.slds {
  color: black;
  width: 100%;
  height: 100%;
  list-style: none;
  font-size: 30px;
  scroll-snap-align: center;
}

.slds:nth-child(1){background: red;}
.slds:nth-child(2){background: orange;}
.slds:nth-child(3){background: green;}

<div class="slider">
  <div class="slds">1</div>
  <div class="slds">2</div>
  <div class="slds">3</div>
</div>

​

Answer 1

您可以在子元素( scroll-snap-stop: always )上添加slds。

您的示例已更新：

​

.slider {
  border: 4px solid black;
  width: 300px;
  height: 200px;
  overflow: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(10, 100%);
  scroll-snap-type: both mandatory;
}

.slider::-webkit-scrollbar {
  height: 0;
}

.slds {
  color: black;
  width: 100%;
  height: 100%;
  list-style: none;
  font-size: 30px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.slds:nth-child(1){background: red;}
.slds:nth-child(2){background: orange;}
.slds:nth-child(3){background: green;}

<div class="slider">
  <div class="slds">1</div>
  <div class="slds">2</div>
  <div class="slds">3</div>
</div>

​