구조
scroll-snap properties
parent elment
scroll-snap-type : [both | x | y] + [mandatory | proximity];
child element
targetting : parent > * { scroll-snap-align : [center | start | end]}
*div tag dir 요소 값
ltr : left to right 정렬
rtl : right to left 정렬
html
<body>
<div class="holster">
<div class="container x mandatory-scroll-snapping" dir="ltr">
<div>X Mand. LTR</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container y proximity-scroll-snapping" dir="ltr">
<div>Y Mand. RTL</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
</body>css
html,
body,
.holster {
margin: 0;
height: 100%;
}
.holster {
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
align-items: center;
}
.container {
display: flex;
flex-flow: row nowrap;
border: 1px solid lightgreen;
width: 100%;
height: 128px;
overflow: auto;
}
.container > div {
flex: none;
width: 100%;
font-size: 36px;
text-align: center;
scroll-snap-align: center;
}
.container > div:nth-child(odd) {
background-color: dodgerblue;
}
.mandatory-scroll-snapping {
scroll-snap-type: x mandatory;
}
.proximity-scroll-snapping {
scroll-snap-type: x proximity;
}
React, React-Native https://darcyu83.netlify.app/