js 한 페이지씩 스크롤 되도록

 

<div id="main">
	<article></article>
    <article></article>
</div>

#main > article 한 페이지씩 보이게 되는 대상

css로 높이 100svh 잡아줌

document.addEventListener("DOMContentLoaded", function() {
    const articles = document.querySelectorAll("#main article");
    const articleHeight = window.innerHeight;
    let currentPage = 0;

    function scrollToPage(page) {
      articles[page].scrollIntoView({
        behavior: "smooth"
      });
    }

    articles.forEach(function(article) {
      article.addEventListener("wheel", function(event) {
        event.preventDefault();
        const delta = Math.sign(event.deltaY);
        currentPage = Math.min(Math.max(currentPage + delta, 0), articles.length - 1);
        scrollToPage(currentPage);
      }, {
        passive: false
      });
    });
  });