<div class="no-support">
<p>Heads up: It doesn't look like your browser supports scroll snapping! Check <a href="https://caniuse.com/#feat=css-snappoints">Can I use</a> for current browser support. Maybe try opening this CodePen in a different browser, like Chrome?</p>
</div>
<div class="example-wrapper">
<p>Scroll slowly to "feel" the snap points.</p>
<p><code>scroll-snap-align: start;</code></p>
<div class="container both-scroll both-mandatory align-start">
<div class="wrapper">
<div class="element">
<code>scroll-snap-align: start;</code>
</div>
<div class="element">
<code>scroll-snap-align: start;</code>
</div>
<div class="element">
<code>scroll-snap-align: start;</code>
</div>
<div class="element">
<code>scroll-snap-align: start;</code>
</div>
</div>
</div>
<p><code>scroll-snap-align: end;</code></p>
<div class="container both-scroll both-mandatory align-end">
<div class="wrapper">
<div class="element">
<code>scroll-snap-align: end;</code>
</div>
<div class="element">
<code>scroll-snap-align: end;</code>
</div>
<div class="element">
<code>scroll-snap-align: end;</code>
</div>
<div class="element">
<code>scroll-snap-align: end;</code>
</div>
</div>
</div>
<p><code>scroll-snap-align: center;</code></p>
<div class="container both-scroll both-mandatory align-center">
<div class="wrapper">
<div class="element">
<code>scroll-snap-align: center;</code>
</div>
<div class="element">
<code>scroll-snap-align: center;</code>
</div>
<div class="element">
<code>scroll-snap-align: center;</code>
</div>
<div class="element">
<code>scroll-snap-align: center;</code>
</div>
</div>
</div>
<p><code>scroll-snap-align: none;</code></p>
<div class="container both-scroll both-mandatory align-none">
<div class="wrapper">
<div class="element">
<code>scroll-snap-align: none;</code>
</div>
<div class="element">
<code>scroll-snap-align: none;</code>
</div>
<div class="element">
<code>scroll-snap-align: none;</code>
</div>
<div class="element">
<code>scroll-snap-align: none;</code>
</div>
</div>
</div>
</div>
.align-start .element {
scroll-snap-align: start;
}
.align-end .element {
scroll-snap-align: end;
}
.align-center .element {
scroll-snap-align: center;
}
.align-none .element {
scroll-snap-align: none;
}
.no-support {
text-align: center;
padding: 5px;
width: 450px;
margin-left: auto;
margin-right: auto;
background: #ee6620;
color: #fff;
font-size: 16px;
}
@supports(scroll-snap-type: both mandatory) {
.no-support {
display: none;
}
}
.example-wrapper {
text-align: center;
width: 360px;
margin-left: auto;
margin-right: auto;
}
.container {
width: 360px;
height: 360px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border: 2px solid #333;
overflow: auto;
position: relative;
-webkit-overflow-scrolling: touch;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(300px);
scroll-snap-points-x: repeat(300px);
}
.element {
width: 300px;
height: 300px;
scroll-snap-stop: normal;
color: white;
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.element code {
font-size: 13px;
}
.element:nth-child(1) {
background: #1d1e21;
}
.element:nth-child(2) {
background: #ee6620;
}
.element:nth-child(3) {
background: #777ba0;
}
.element:nth-child(4) {
background: #da1e62;
}
.both-mandatory {
scroll-snap-type: both mandatory;
}
.both-scroll .wrapper {
width: 620px;
height: 100%;
display: grid;
grid-template-columns: 300px 300px;
grid-gap: 10px;
padding: 100px 100px 400px 100px; /* To give more space to scroll */
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.