<div class="d"></div>
<div class="wrap">
  <div class="scenes">
    <div class="track">
      <div class="heading">Heading 1</div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet consectetur.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
    </div>
    <div class="track">
      <div class="heading">Heading 2</div>
      
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet consectetur.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
    </div>
    <div class="track">
      <div class="heading">Heading 3</div>
      
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet consectetur.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
    </div>
    <div class="track">
      <div class="heading">Heading 4</div>
      
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet consectetur.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
    </div>
    <div class="track">
      <div class="heading">Heading 5</div>
      
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet consectetur.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
    </div>
    <div class="track">
      <div class="heading">Heading 6</div>
      
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet consectetur.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
    </div>
    <div class="track">
      <div class="heading">Heading 7</div>
      
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet consectetur.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
    </div>
  </div>
</div>

body {
  background: #F5F7FA;
}

.wrap {
  height: 80vh;
  position: relative;
  overflow: scroll;
  margin: 10em auto 20em;
  max-width: 960px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /*overscroll-behavior: contain;*/
}

.scenes {
  display: flex;
  flex-wrap: nowrap;
}

.track {
  flex: 1 0 calc(22% + 7px);
  scroll-snap-align: start;
}

.track + .track {
  margin-left: -1px;
}

.heading {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  border: solid #fff;
  border-width: 0 1px;
  z-index: 1;
  background: #efefef;
  font-weight: 700;
}

.entry {
  border: 1px solid #ebebeb;
  border-top: 0;
  background: #fff;
  height: 8em;
  padding: 1em;
}


@media (max-width: 767px) {
  .track {
    flex: 1 0 calc(50% + 7px);
  }
}