<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
.interfaces {
width:278px;
height:296px;
scroll-snap-align: end none;
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
color: white;
}
.doc {
width: 300px;
height:300px;
overflow-x: hidden;
overflow-y: auto;
white-space: nowrap;
scroll-snap-type:y mandatory;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"doc"
>
<
div
class
=
"interfaces"
style=
"background-color: rgb(178, 248, 16);
scroll-margin-block-end: 90px;">
Geek 1
</
div
>
<
div
class
=
"interfaces"
style=
"color: black;
scroll-margin-block-end: 90px;">
Geek 2
</
div
>
<
div
class
=
"interfaces"
style=
"background-color: green;
scroll-margin-block-end: 90px;">
Geek 3
</
div
>
<
div
class
=
"interfaces"
style=
"color: green;
scroll-margin-block-end: 90px;">
Geek 4
</
div
>
<
div
class
=
"interfaces"
style=
"background-color: rgb(34, 177, 34);
scroll-margin-block-end: 90px;">
Geek 5
</
div
>
<
div
class
=
"interfaces"
style=
"background-color: rgb(108, 216, 162);
scroll-margin-block-end: 90px;">
Geek 6
</
div
>
</
div
>
</
body
>
</
html
>