無滾動條全螢幕單頁面滾動效果：fullPage.js 實現

效果名稱

這類「無滾動條、整頁切換、單頁面滾動」效果稱為 Full Page Scroll / One Page Scroll，代表網站：coding.net (舊版)。

實現方案

1. fullPage.js (最成熟)：

   <link rel="stylesheet" href="fullpage.css" />
   <script src="fullpage.js"></script>
   <div id="fullpage">
     <div class="section">Section 1</div>
     <div class="section">Section 2</div>
     <div class="section">Section 3</div>
   </div>
   <script>
     new fullpage('#fullpage', {
       navigation: true,
       scrollingSpeed: 700
     });
   </script>

   Demo: dowebok fullPage demo
2. CSS Scroll Snap (原生、無依賴)：

   .container {
     height: 100vh;
     overflow-y: scroll;
     scroll-snap-type: y mandatory;
   }
   .section {
     height: 100vh;
     scroll-snap-align: start;
   }

   支援現代瀏覽器，無法控制滾動速度、回呼事件較少。
3. IntersectionObserver + transform 手寫：高度客製化需求時採用。

選型建議