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

Question

我正在尝试使用表单来完成旋转木马类型的功能.

我使用一个ng-repeat循环遍历每个表单值,以显示在每个表单字段上.

水平可滚动区域的宽度:

width of form * amount of forms 

目前我可以水平滚动但理想情况下我希望能够滚动并停在每个表单并考虑当前表单的索引.

有没有办法在滚动时检测到,如果有现有div,停止并显示表单而不是自由滚动？或者可能是一种更好的处理方法？

Answer 1

CSSScroll Snapping属性正是您所寻找的。唯一的问题是它在不同浏览器之间的工作方式不一致。下面是它的工作原理。

超文本标记语言

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