滑动滚动每次滑动只捕捉一个部分，无论滑动速度如何答案

【问题标题】：swipe scroll snap only one section for every swipe and regardless of swipe speed滑动滚动每次滑动只捕捉一个部分，无论滑动速度如何
【发布时间】：2022-11-30 12:30:23
【问题描述】：

我有一个水平滚动容器，我在其上应用了 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>

【问题讨论】：

查看scroll hijacking 这是一个来自 quick goodle codepen.io/BandarRaffah/pen/LYPQrEe 的示例
@DonaldDuck 它有效，但我真的需要让用户感觉他们在滑动时正在抓住该部分，这就是我使用 CSS 快速滚动方法的原因。我通过隐藏第三部分来尝试一些 jquery 代码，并使其仅在用户滑动到第二部分时才可见，但它最多只能在三个部分上工作。我不是一个好的 jquery 开发者，我认为有一个 jquery 方法可以解决这个问题。顺便说一句，谢谢你。

标签： jquery css scroll swipe

【解决方案1】：

您可以在子元素（您的slds）上添加scroll-snap-stop: always。

您的示例已更新：

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

【讨论】：