Question

我构建类似Netflix队列的东西，在那里我创建了一系列延伸到视口之外的项目

＆＃13;

.row {
  overflow:scroll;
}

.slider {
  height: 100px;
  white-space: nowrap;
}

.square {
  width: 200px;
  height: 100px;
  background-color: red;
  margin-right: 10px;
  display: inline-block;
}

＆＃13;

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

＆＃13;

这种方法效果很好，但是能够轻弹我平板电脑上的物品并让一排物品滑行并减速摩擦会很好。通过使用iframe，我已经能够在过去垂直地实现这种效果，但我不知道如何在横向上获得类似的东西。

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

https://jsfiddle.net/

Answer 1

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

Momentum Scrolling on iOS Overflow Elements

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

1 个答案: