Untitled fiddle

by lcdavid94

HTML

<div class="map-viewport">
  <div class="map-surface">
    <div class="landmark" style="left: 500px; top: 500px;">A</div>
    <div class="landmark" style="left: 300px; top: 800px;">B</div>
    <div class="landmark" style="left: 600px; top: 1200px;">C</div>
  </div>
</div>

CSS

.map-viewport {
  width: 500px;
  height: 500px;
  overflow: scroll;
  scroll-snap-type: pair mandatory;
}
.map-surface {
  width: 1000px;
  height: 2000px;
  position: relative;
  background-color: aquamarine;
}
.landmark {
  position: absolute;
  width: 50px;
  height: 50px;
  scroll-snap-align: center;
  background-color: red;
  text-align: center;
  color: white;
}
.landmark:snapped {
  outline: 3px solid #1a73e8;
  transform: scale(1.1);
}