Firstly you need to make sure the scroll bar is belong to the parent div(#container).
for my case, there is no vertical scroll bar belong to parent div(#container).
<html>
<head>
<style>
body {
margin:0;
}
#container {
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;
}
</style>
</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>
for my case, i need to add overflow-y style with value scroll to
Final :
<html>
<head>
<style>
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;
}
</style>
</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>
Reference
https://stackoverflow.com/questions/53416348/css-scroll-snapping-vertical-not-working
No comments :
Post a Comment