html :
<html>
<head>
<title>Scroll Snap Type Example</title>
</head>
<body>
<div id="container">
<div id="panel1" class="panel">
<font>1</font>
</div>
<div id="panel2" class="panel">
<font>2</font>
</div>
<div id="panel3" class="panel">
<font>3</font>
</div>
</div>
</body>
</html>
Css part
body {
margin: 0;
}
#container {
overflow-y: scroll;
height: 100vh;
scroll-snap-type: y mandatory;
}
.panel {
height: 100%;
scroll-snap-align: start;
text-align: center;
}
.panel font {
font-size: 72px;
position: relative;
top: 45%;
}
#panel1 {
border-left: 30px solid red;
}
#panel2 {
border-left: 30px solid green;
}
#panel3 {
border-left: 30px solid blue;
}
Demo
No comments :
Post a Comment