scroll snap type
[html]
<header class="top_bar">
<!-- ul>li*5>a[href="#"]{섹션 $} -->
<ul>
<li><a href="#section-1">섹션 1</a></li>
<li><a href="#section-2">섹션 2</a></li>
<li><a href="#section-3">섹션 3</a></li>
<li><a href="#section-4">섹션 4</a></li>
<li><a href="#section-5">섹션 5</a></li>
</ul>
</header>
<div class="section_group">
<!-- section#section-$.section.section-${섹션 $}*5 -->
<section id="section-1" class="section section-1">섹션 1</section>
<section id="section-2" class="section section-2">섹션 2</section>
<section id="section-3" class="section section-3">
<h1>섹션 3</h1>
<!-- lorem*30 -->
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro accusantium et reiciendis mollitia aliquid. Soluta aliquid architecto ipsa quos tenetur commodi nobis reprehenderit quo? Rem aspernatur deleniti repellendus voluptate repudiandae.
Est repellat cum facere sequi, atque odio ratione. Vitae cum quam atque, est, iure magnam veniam voluptatem adipisci beatae fugit voluptate, soluta vel iusto consequuntur laudantium ex quod cupiditate inventore?
Quisquam eum sint ea a sunt repudiandae minima iste deleniti beatae dolorem dicta reiciendis laboriosam aut, at, consectetur consequatur, ducimus ab nam magnam. Odit quibusdam nulla tempora et possimus! Tempora!
Saepe accusamus architecto quod iste, delectus nostrum voluptates eveniet ea debitis laboriosam optio doloribus est quisquam libero doloremque nisi in, ratione cum quibusdam expedita dicta odit quam? Ea, tenetur hic!
Quidem inventore mollitia fuga, eligendi qui ex nihil voluptatum non incidunt doloribus nostrum eaque, ratione commodi quisquam architecto maiores facilis facere explicabo cumque voluptate optio vel magni? Id, quidem esse.
Ipsa sapiente eum itaque illo dolor ducimus consequuntur officiis nemo quam aut dolores corporis aspernatur repellat, aliquam eius quis quibusdam voluptatem quasi hic, asperiores, reiciendis unde? A impedit aliquam debitis.
Soluta corrupti consequatur, quod laborum explicabo harum repellat tempore aspernatur mollitia ex, atque maiores ad reiciendis sed eligendi labore fuga necessitatibus vero cumque facilis sunt. Tenetur nemo alias doloremque officia.
Nostrum minus, quis sequi quod harum nihil saepe aspernatur obcaecati natus voluptates quibusdam? Sunt odio repudiandae voluptatum neque, illo maiores ipsam eligendi fugiat perferendis tenetur, asperiores aut pariatur a impedit!
Modi dicta voluptate in natus quae, maxime ullam minima omnis rem tempora obcaecati voluptates vel voluptatum laborum ex iure iusto eos cupiditate mollitia nihil ipsa totam blanditiis! Perspiciatis, quas nesciunt?
Cum, error ratione. Possimus aliquam molestias explicabo! Soluta eveniet, nisi impedit similique iure explicabo quis odio quasi tempora natus voluptas harum nulla deleniti sunt, dolore alias aut accusantium, libero exercitationem.
Obcaecati, amet recusandae mollitia qui suscipit exercitationem odit eos similique corporis, dolor dolorem architecto, ab iure sit facilis doloremque culpa aperiam asperiores et consequuntur earum totam iste! Vero, id similique!
Suscipit, aperiam! Atque magnam sapiente odit maiores dicta? Molestiae libero earum, nisi dignissimos dolorem iste atque id ab nostrum alias, reiciendis doloribus temporibus nulla laudantium nesciunt cupiditate sint architecto excepturi.
Quaerat, quis facere consequuntur illo temporibus error praesentium doloribus obcaecati possimus recusandae id ex eveniet magnam earum dignissimos hic ab sit ducimus quos saepe expedita a quam! Maiores, distinctio alias!
Natus consectetur pariatur, illum animi laudantium rerum hic odio sint nihil sit libero optio cum beatae tempora voluptatibus vitae dolores excepturi ab repudiandae laborum ipsa illo mollitia labore quia. Dolor.
Ipsa omnis voluptates velit veritatis accusamus, repudiandae repellendus id rem ut ipsum nam placeat aut similique cumque fugit sed commodi laborum saepe sapiente soluta assumenda illum ratione autem ea. Mollitia.
Nulla, sed similique, cupiditate, odio architecto debitis accusantium quod alias maiores commodi dicta ullam! Qui sit necessitatibus reiciendis dolorum facere nemo natus totam laboriosam. Ipsa, praesentium. Eius ab nihil et!
Corporis at veniam possimus, dolor expedita blanditiis vitae ipsam vero eveniet dolores in sit autem excepturi omnis voluptates quidem itaque fugit rerum sed recusandae eaque, dicta pariatur explicabo! Illo, aut!
Modi expedita rerum architecto assumenda provident amet quae corrupti quia ducimus, repellendus fugiat perferendis, numquam sit consectetur corporis odio, ratione sequi dolorum ab hic dolor soluta obcaecati vel doloremque? Perferendis.
Adipisci expedita qui esse nihil at tenetur modi in, id sapiente, fugiat consequuntur hic rerum facilis odit? Placeat laudantium iste ducimus iure enim voluptatibus officiis! Illum dicta reprehenderit dolores perspiciatis?
Illo voluptatum earum nulla, velit praesentium facilis, perspiciatis voluptates aperiam animi quibusdam esse a officiis iste incidunt nesciunt est? Error placeat corporis recusandae sed illum. Libero sed laboriosam eius et?
Reiciendis voluptate quia adipisci excepturi inventore porro, impedit, consequuntur sit recusandae nisi dolore fugit modi repellat ipsam nam. Maiores odit pariatur non optio ea ipsum vitae doloremque doloribus praesentium debitis.
Suscipit facere, eum ipsa vel praesentium accusamus dignissimos temporibus nam dolore voluptatum distinctio quidem nesciunt optio harum totam corporis animi nihil? Nulla ducimus recusandae eaque placeat quis repellendus beatae molestias.
Iure ut, hic porro vel delectus voluptate. Quae culpa ipsum soluta cumque, aut modi quasi ullam blanditiis repudiandae deserunt quisquam molestiae deleniti sequi reprehenderit animi aperiam iure cum eum. Suscipit.
Labore libero iste dolores deserunt nihil, inventore laudantium minus, possimus aut at aspernatur incidunt soluta unde! Obcaecati ea excepturi deleniti? At, saepe. Quisquam nobis exercitationem nostrum dolor debitis quod aliquid?
Molestiae laborum consequatur eius vitae ipsa, cum est natus. Iusto facere, sequi saepe exercitationem ducimus alias blanditiis veritatis inventore temporibus dignissimos quaerat hic distinctio, rem asperiores, debitis vitae porro sit!
Officiis iusto eaque aut, reiciendis, ducimus provident, accusantium labore ullam id optio consectetur nulla obcaecati tenetur. Hic quasi, itaque voluptates delectus, eum quod excepturi iusto distinctio explicabo eaque non laudantium!
Id dicta itaque molestiae facere quis vero incidunt veniam aliquam aperiam laudantium! Cumque ut atque velit cupiditate eius et, sit laudantium, accusamus voluptas repellat doloribus veritatis magnam eum illo aspernatur.
Illum, consequatur maxime beatae blanditiis inventore animi nisi natus nesciunt non. Sequi minima eveniet vero, exercitationem voluptatibus quam eius aut tenetur numquam non illo at laboriosam. Consequatur fugit maxime fugiat.
Quaerat, tenetur! Tempore, velit adipisci numquam incidunt neque architecto dicta aliquam dolor, recusandae aut cum explicabo tenetur repudiandae aperiam quas est necessitatibus quam ipsam ea aspernatur voluptate labore, repellendus ipsum?
Autem impedit aliquam magnam eos architecto quisquam harum saepe, quis minus delectus mollitia, dolorum eligendi placeat velit illum corrupti numquam commodi. Minima esse amet pariatur vel, accusantium est eum doloribus.
</section>
<section id="section-4" class="section section-4">섹션 4</section>
<section id="section-5" class="section section-5">섹션 5</section>
</div>[css]
body {
margin: 0;
}
.top_bar {
position: fixed;
top: 0;
right: 0;
border: 3px solid red;
background-color: pink;
}
.section_group {
overflow-y: scroll;
height: 100vh;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
.section_group > .section {
min-height: 100vh;
border: 10px solid red;
box-sizing: border-box;
scroll-snap-align: start;
}