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

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/