【HTML/CSS小技】スクロールをピタッと止めるscroll-snapを実装!
HTMLのソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スクロール</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div>
<p>BOX1</p>
</div>
<div>
<p>BOX2</p>
</div>
<div>
<p>BOX3</p>
</div>
<div>
<p>BOX4</p>
</div>
</div>
</body>
</html>
CSSのソースコード
.link {
padding: 10px;
text-align: center;
}
.container{
width: 100%;
height: 100vh;
scroll-snap-type: y mandatory;
overflow: scroll;
}
.container div{
height: 100vh;
scroll-snap-align: start;
padding: 10px;
}
.container p{
font-size: 80px;
color: #FFF ;
line-height:0;
}
.container div:nth-child(1){
background: #FF5192 ;
}
.container div:nth-child(2){
background: #90EE90 ;
}
.container div:nth-child(3){
background: #1e90ff ;
}
.container div:nth-child(4){
background: #ff8c00 ;
}
この記事が気に入ったらサポートをしてみませんか?