<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child stop">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
</div>
 
.container {
   scroll-snap-type: both mandatory;
  
  margin: auto;
  width: 380px;
  display: flex;
  overflow: auto;
}

.child {
  scroll-snap-align: start;
/*   scroll-snap-align: center; */
/*   scroll-snap-align: end; */
  
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: gray;
  flex-shrink: 0;
  width: 250px;
  height: 250px;
  margin: 0 2px;
}

.child:first-child {
  margin-left: 0px;
}

.child:last-child {
  margin-right: 0px;
}

.stop {
  scroll-snap-stop: always;
/*     scroll-snap-stop: normal; */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.