停在水平滾動頁面上的某個點

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/