javascript - 在触摸设备上水平滑动元素

我正在构建类似 Netflix 队列的东西，我在其中创建一排延伸到视口(viewport)之外的元素

.row {
  overflow:scroll;
}

.slider {
  height: 100px;
  white-space: nowrap;
}

.square {
  width: 200px;
  height: 100px;
  background-color: red;
  margin-right: 10px;
  display: inline-block;
}

<div class="row">
  <div class="slider">
      <div class="square">Foo</div>
      <div class="square">Foo</div>
      <div class="square">Foo</div>
      <div class="square">Foo</div>
      ...

这很好用，但如果能够在我的平板电脑上快速浏览元素并让一排元素滑动并通过摩擦减慢速度，那就太好了。过去，我已经能够通过使用 iframe 在垂直方向上实现这种效果，但我不知道如何在水平方向上获得类似的效果。

CSS 解决方案是理想的，但也可以采用 Javascript 解决方案。

https://jsfiddle.net/

最佳答案

移动版 safari 有这个 css 属性 -webkit-overflow-scrolling: touch 这为可滚动容器提供了您正在谈论的动量效果。我目前不知道有任何其他浏览器实现了此功能。

Momentum Scrolling on iOS Overflow Elements

关于javascript - 在触摸设备上水平滑动元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40640649/