原生JS实现类似fullpage的单页/全屏滚动
在前端开发中，单页/全屏滚动被广泛应用于网站和应用程序中。其中比较流行的库是Fullpage.js，但是如果你想自己动手实现这种效果，本文将为你提供相关的知识和指导。
实现原理
单页/全屏滚动的基本原理是通过监听滚动事件，控制页面元素的展示与隐藏，从而达到页面切换的效果。具体来说，我们需要实现以下功能：
- 监听鼠标滚轮事件，根据滚动方向判断页面切换的方向；
- 控制页面元素的显示与隐藏：当前页面以及上一页和下一页（如果存在）；
- 处理页面的动画效果，例如淡入淡出、旋转等。
实现步骤
1. HTML 结构
首先创建一个容器元素，用于包含所有要滚动的页面。每个子页面都是一个单独的 section 元素，它们相互之间垂直排列。建议使用语义化的 HTML 标签，例如 article, section 等，便于 SEO 和可访问性。
---- --------------- -------- ----------------- ----------- -------- ----------------- ----------- -------- ----------------- ----------- ------
2. CSS 样式
设置容器元素的高度为 100vh，并将每个子页面的高度也设为 100vh。使用 overflow 属性来隐藏非当前页的元素。
----- ---- - ------- -- -------- -- - ---------- - ------- ------ --------- ------- - ----- - ------- ------ -------- ----- ---------------- ------- ------------ ------- ---------- ----- ------ ------ - ------------------ - ----------------- ---- - ------------------ - ----------------- ----- - ------------------ - ----------------- ------ -
3. JavaScript 代码
首先定义一个变量 currentPage 表示当前显示的页面，初始值为 1。然后监听滚轮事件，在回调函数中判断滚动方向，以及计算下一页和上一页的索引。最后根据索引控制页面元素的显示与隐藏。
--- ----------- - --
----- ----- - -----------------------------------
----- -------- - -------------
-------- ------------------- -
----- ------ - -------------
--- ---------
-- ------- - -- - -- ----
-------- - ----------- - --
-------- - -------- - -------- - -------- - --------- -- -----------
- ---- -- ------- - -- - -- ----
-------- - ----------- - --
-------- - -------- - - - - - --------- -- ----------
-
-- --------- --- ------------ -
----------------- - ------------------------------
-------------- - ---------------------------
----------- - ---------
-
-
---------------------------------- --------------4. CSS 动画效果
为了使页面切换更加平滑，我们可以为每个 section 元素定义过渡效果。例如，在切换时淡入淡出：
----- - ----------- ------- ---- ----- - ------------ - -------- -- - ------------------ - -------- -- --------------- ----- -
总结
本文介绍了如何使用原生 JavaScript 实现类似 Fullpage.js 的单页/全屏滚动效果。我们需要
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/876