반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>scroll snap</title>
<style>
* {
box-sizing: border-box;
}
.wrap {
width: 100%;
height: 400px;
border: 1px solid #dddddd;
overflow: auto;
position: relative;
scroll-snap-type: y mandatory;
}
.wrap div {
height: 100%;
color: #ffffff;
scroll-snap-align: start;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
font-weight: bold;
}
.wrap div:nth-child(1) {
background-color: #ff3300;
}
.wrap div:nth-child(2) {
background-color: #33ff00;
}
.wrap div:nth-child(3) {
background-color: #ffdd00;
}
.wrap div:nth-child(4) {
background-color: #0033ff;
}
.wrap div:nth-child(5) {
background-color: #ff33ff;
}
</style>
</head>
<body>
<div class="wrap">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
</div>
</body>
</html>
반응형