停在水平滚动页面上的某个点

Question

我正在尝试使用表单完成轮播类型的功能。

我使用ng-repeat遍历要在每个表单字段上显示的每组表单值。

水平滚动区域的宽度：

width of form * amount of forms 

目前，我能够水平滚动，但是理想情况下，我希望能够滚动和停止每个表格，并考虑当前显示的表格的索引。

有没有一种方法可以检测滚动时是否存在div，请停止并显示该窗体，而不是自由滚动？ 或者可能是更好的方式来处理此问题？

Answer 1

CSS Scroll Snapping属性正是您要寻找的。 唯一的问题是，它不能在所有浏览器中一致地工作。 下面是它的工作原理。

的HTML

<div class='container'>
  <section class='child'></section>
  <section class='child'></section>
  <section class='child'></section>
</div>

的CSS

.container {
  scroll-snap-type: y mandatory;
}

.child {
  scroll-snap-align: start;
}

有关如何使用它的所有类型的选项。 有关更多信息，请看这篇很棒的文章。 https://css-tricks.com/practical-css-scroll-snapping/