Stop at a certain point on a horizontal scrolling page

Question

I am trying to accomplish a carousel type of functionality with forms.

I use an ng-repeat to loop through each set of form values to be displayed on each form field.

The width of horizontal scrollable area:

width of form * amount of forms 

Currently I am able to scroll horizontally but ideally I would like to be able to scroll and stop at each form and take into account the index of the current form displayed.

Is there a way to detect that when scrolling, if there is an existing div, stop and display the form rather than freely scrolling? Or possibly a better way of handling this?

Answer 1

The CSS Scroll Snapping property is exactly what you are looking for. the only issue is that it does not work consistently across browsers. Here is how it works.

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;
}

There are all types of options on how to use it. For more information take a look at this awesome article. https://css-tricks.com/practical-css-scroll-snapping/