CSS Snap Points

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">

  <h1>
    CSS Snap Points
  </h1>
  <p>
    Scroll horizontally and see the panels snap into view.
    This is done with pure CSS, no JavaScript and no polyfills 
    required.
  </p>
  <div class="snap-container">
    <div>
      <h2>
        Browser  Support
      </h2>
      <p>
        This sample should work on Chrome 69+ (Canary, due to be
        released in September 2018), Firefox, Edge, IE 11, and
        Safari (iOS).
      </p>
    </div>
    <div>
      <h2>
        Chrome
      </h2>
      <p>
        Chrome version 69 has the most up-to-date CSS snap implementation.
        It uses <code>scroll-snap-align</code>, while other browsers still
        use <code>scroll-snap-coordinate</code>.
      </p>
    </div>
    <div>
      <h2>
        Safari/iOS
      </h2>
      <p>
        Safari supports CSS snapping with a couple of caveats (in addition 
        to using the <code>-webkit-</code> prefix):
      </p>
      <ul>
        <li>You must set <code>-webkit-overflow-scrolling: touch;</code>.</li>
      </ul>
      <ul>
        <li>The elements being scrolled must have <code>overflow: none;</code>
        (the default setting).</li>
      </ul>
    </div>
    <div>
      <h2>
        Edge
      </h2>
      <p>
        On Edge, dragging the scrollbar thumb doesn't cause snapping.
        Touching or clicking the pagination area in the scroll bar does.
      </p>
      <p>
        Edge requires the <code>-ms-</code> prefix for the CSS properties
        related to snap points.
      </p>
    </div>
    <div>
      <h2>
        IE 11
      </h2>
      <p>
        On IE11, snapping is supported for touch only.
      </p>
      <p>
        IE11 requires the <code>-ms-</code> prefix for the CSS properties
        related to snap points.
      </p>
    </div>
    <div>
      <h2>
        Touch Support
      </h2>
      <p>
       ...

CSS

body {
  margin-bottom: 45px;
}
code {
  background: transparent;
  font-weight: bold;
}
h2 {
  font-size: 20px;
  font-weight: bold;
  margin-top: 0;
}
* {
  box-sizing: border-box;
}

.snap-container {
  display: flex;
  align-items: stretch;
  width: 100%;
  overflow: auto;

  scroll-snap-type: x mandatory; /* Chrome Canary */
  scroll-snap-type: mandatory; /* Firefox */
  -ms-scroll-snap-type: mandatory; /* IE/Edge */
  -webkit-scroll-snap-type: mandatory; /* Safari */
  -webkit-scroll-snap-destination: 0% 0%;
  -webkit-overflow-scrolling: touch; /* important for iOS */
}

.snap-container > div {
  width: 100%;
  flex-shrink: 0;
  padding: 12px;
  margin: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);  
  
  scroll-snap-align: start; /* latest (Chrome 69+) */
  scroll-snap-coordinate: 0% 0%; /* older (Firefox/IE) */
  -webkit-scroll-snap-coordinate: 0% 0%; /* older (Safari) */
}

.snap-container > div:nth-child(even) {
  background: #87EA87;
}

.snap-container > div:nth-child(odd) {
  background: #87CCEA;
}