这篇文章将介绍如何使用原生 JS （主要使用 ES6 语法）实现全屏滚动插件，兼容 IE 10+、手机触屏，Mac 触摸板优化，支持自定义页面动画，压缩后 gzip 文件只有 2k。完整源码在这 pure_full_page ，点这查看demo。
1）前面的话
现在已经有很多全屏滚动插件了，比如著名的 fullPage ，那为什么还要自己造轮子呢？
现有轮子有以下问题：
- 首先，最大的问题是最流行的几个插件都依赖 jQuery，这意味着在使用 React 或者 Vue 的项目中使用他们是一件十分蛋疼的事：我只需要一个全屏滚动功能，却还需要把 jQuery 引入，有种杀鸡使用宰牛刀的感觉；
- 其次，现有的很多全屏滚动插件功能往往都十分丰富，这在前几年是优势，但现在（2018-5）可以看作是劣势：前端开发已经发生了很大变化，其中很重要的一个变化是 ES6 原生支持模块化开发，模块化开发最大的特点是一个模块最好只专注做好一件事，然后再拼成一个完整的系统，从这个角度看，大而全的插件有悖模块化开发的原则。
对比之下，通过原生语言造轮子有以下好处：
- 使用原生语言编写的插件，自身不会受依赖的插件的使用场景而影响自身的使用（现在依赖 jQuery 的插件非常不适合开发单页面应用），所以使用上更加灵活；
- 搭配模块化开发，使用原生语言开发的插件可以只专注一个功能，所以代码量可以很少；
- 最后，随着 JS/CSS/HTML 的发展以及浏览器不断迭代更新，现在使用原生语言编写插件的开发成本越来越低，那为什么不呢？
2）实现原理及代码架构
2.1 实现原理
实现原理见下图：容器及容器内的页面取当前可视区高度，同时容器的父级元素 overflow 属性值设为 hidden ，通过更改容器 top 值实现全屏滚动效果。
2.2 代码架构
代码编写的思路是通过 class 定义全屏滚动类，使用时通过 new PureFullPage().init() 使用。
/**
* 全屏滚动类
*/
class PureFullPage {
// 构造函数
constructor() {}
// 原型方法
methods() {}
// 初始化函数
init() {}
}
3）html 结构
鉴于上述实现原理，对于 html 的结构有特定要求，如下：页面容器为 #pureFullPageContainer ，所有的页面为其直接子元素，这里为了方便，直接取 body 为其直接父元素。
<body>
<div id="pureFullPageContainer">
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
</div>
</body>
内容版权声明：除非注明，否则皆为本站原创文章。