前言
随着 web 技术的不断发展，用户对页面交互的要求也越来越高，其中全屏滚动效果流行起来。但是传统的实现方式如果都是通过不断的调整页面高度和很多 JS 代码来实现的，而且整个代码是比较臃肿的。而我们可以利用 Custom Elements 来简化这个过程，达到更好的代码效果。
Custom Elements
Custom Elements 是 Web Components API 的一个部分，是一种允许开发人员自定义 HTML 标签的 API。我们可以方便的通过 JavaScript 创建自定义元素，并定义一些特定的属性和方法。这个功能可以帮助我们实现更加复杂交互效果的页面，同时可以大大简化我们的开发过程。
如何创建 Custom Element
创建 Custom Element 需要使用到 window.customElements.define()。 这个方法用来注册自定义元素的。define()方法有两个参数，第一个是自定义元素的名称，第二个是一个对象，这个对象包含了我们自定义元素的行为、属性等。
这是一个通用的创建 Custom Element 的模板：
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
-
------------------- -
-- ------ -------- ---------- ------
-- ---------
-
---------------------- -
-- ------ -------- ---------- ------
-- ------------
-
----------------- -
-- ------ -------- ---------- ------
-- -------
-
---------------------------------- --------- --------- -
-- ------ -------- ---------- ------
-- --------- -------
-
-
---------------------------------------------- ---------------上述代码中，我们创建了一个名为 CustomElement 的 Custom Element，并将其注册为 <custom-element> 。在这里我们可以看到一个构造函数，以及一些其他的按约定命名的回调方法（connectedCallback(), disconnectedCallback(), adoptedCallback() 和 attributeChangedCallback()），这些方法也可以所谓的生命周期钩子。
Custom Element 生命周期
Custom Element 拥有自己的生命周期，我们通过实现 connectedCallback() 等方法可以精确控制 Custom Element 注册、挂载和销毁的行为。
以下是 Custom Element 的生命周期回调函数：
- connectedCallback(): 当 Custom Element 添加到页面中时被调用。
- disconnectedCallback(): 当 Custom Element 从页面中删除时被调用。
- attributeChangedCallback(): 当 Custom Element 的属性发生变化时被调用。
- adoptedCallback(): 当 Custom Element 从页面中移动到另一个文档（例如，从主文档移到 iframe 或 shadow DOM）时被调用。
基于 Custom Elements，我们可以很容易地创建一个全屏滚动效果的组件。由于 Custom Elements 可以直接插入到 HTML 任何位置，这些特性让整个实现过程变得简单。
首先，我们要考虑一个全屏滚动组件具有什么功能。我们需要：
- 一些固定高度的屏幕区域
- 监听用户滚动事件，并相应进行页面切换
- 提供一些切换动画、交互等效果
以 <full-page> 为例，我们可以通过以下代码来实现：
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
------------- - ---------------------------------
------------------------ - --
---------------- - ------
------------------------------ --- -- -
-- ------------------ -
-------
-
-- --------- - -- -
------------------
- ---- -- --------- - -- -
----------------
-
---
-
------------ -
-- ------- -------- ------ ------ -- --- ---- ----
---------------- - -----
----- ---------------- - ------------------------ - --
----- ----------- - --------------------------------
-- -------------- -
-------
-
----- ----------- - ----------------------------------------
-------------------------------------------- -- -- -
------------------------ - -----------------
---------------- - ------
---
------------------------------------------
-----------------------------------------
-
---------- -
-- ------- -------- ------ ------ -- --- ---- ----
---------------- - -----
----- ---------------- - ------------------------ - --
----- ----------- - --------------------------------
-- -------------- -
-------
-
----- ----------- - ----------------------------------------
-------------------------------------------- -- -- -
------------------------ - -----------------
---------------- - ------
---
--------------------------------------------
-------------------------------------------
-
-
----------------------------------------- ----------这个 Custom Element 由多个子元素组成，这些子元素（例如，<section>)表示每个页面。我们初始化了一些属性，如 this.sections，this.currentSectionIndex 等。我们监听了一个 wheel 事件的回调函数，用来根据鼠标滚轮事件，让页面进行滚动。
接着，我们将 scrollDown() 和 scrollUp() 方法用来控制页面的滚动。这两个方法中，我们首先防止了在滚动过程中出现多次滚动事件的问题；同时，我们通过添加和移除 CSS 类（例如，在 scrollDown() 方法中，我们针对当前页面添加了 slide-out-up 类，针对下一个页面添加了 slide-in-up 类，以制作出 “从上到下滑动”的效果）来实现了我们的交互。
最后我们使用 window.customElements.define('full-page', FullPage); 将这个组件注册为 <full-page> 元素。
示例代码
完整的组件代码示例，包括 CSS 样式等，可以在这里查看：Gist link
总结
通过 Custom Elements，我们可以轻松创建可复用的全屏滚动效果组件，并且可以极大地简化代码。我们可以通过回调函数和 CSS 类名的处理实现交互动画、回调和拦截事件，以便更好地自定义。Custom Elements 的应用极为广泛，尤为适合创建可复用的 HTML/SVG 元素，以实现环境、场景等交互效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64549284968c7c53b086b15c