<div>
  Scroll the container down!
</div>
<ul class="proximity">
  <li style="background-color: red">Proximity 1</li>
  <li style="background-color: blue">Proximity 2</li>
  <li style="background-color: green">Proximity 3</li>
  <li style="background-color: orange">Proximity 4</li>
  <li style="background-color: yellow">Proximity 5</li>
  <li style="background-color: purple">Proximity 6</li>
  <li style="background-color: gold">Proximity 7</li>
</ul>
<ul class="mandatory">
  <li style="background-color: red">Mandatory 1</li>
  <li style="background-color: blue">Mandatory 2</li>
  <li style="background-color: green">Mandatory 3</li>
  <li style="background-color: orange">Mandatory 4</li>
  <li style="background-color: yellow">Mandatory 5</li>
  <li style="background-color: purple">Mandatory 6</li>
  <li style="background-color: gold">Mandatory 7</li>
</ul>

ul {
  padding: 0;
  margin-right: 30px;
  height: 200px;
  width: 200px;
  overflow-y: scroll;
  float: left
}

ul.proximity {
  scroll-snap-type: y proximity;
}

ul.mandatory {
  scroll-snap-type: y mandatory;
}

li {
  list-style: none;
  height: 200px;
  scroll-snap-align: start;
}