<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.