用ES6写全屏滚动插件的示例代码
18 浏览量
2020-08-27
14:51:46
上传
评论
收藏 147KB PDF 举报
用用ES6写全屏滚动插件的示例代码写全屏滚动插件的示例代码
本篇文章主要介绍了用ES6写全屏滚动插件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参
考。一起跟随小编过来看看吧
这篇文章将介绍如何使用原生 JS （主要使用 ES6 语法）实现全屏滚动插件，兼容 IE 10+、手机触屏，Mac 触摸板优化，支
持自定义页面动画，压缩后 gzip 文件只有 2k。完整源码在这 pure_full_page ，点这查看demo。
1）前面的话）前面的话
现在已经有很多全屏滚动插件了，比如著名的 fullPage ，那为什么还要自己造轮子呢？
现有轮子有以下问题：
1. 首先，最大的问题是最流行的几个插件都依赖 jQuery，这意味着在使用 React 或者 Vue 的项目中使用他们是一件十分
蛋疼的事：我只需要一个全屏滚动功能，却还需要把 jQuery 引入，有种杀鸡使用宰牛刀的感觉；
2. 其次，现有的很多全屏滚动插件功能往往都十分丰富，这在前几年是优势，但现在（2018-5）可以看作是劣势：前端开
发已经发生了很大变化，其中很重要的一个变化是 ES6 原生支持模块化开发，模块化开发最大的特点是一个模块最好只
专注做好一件事，然后再拼成一个完整的系统，从这个角度看，大而全的插件有悖模块化开发的原则。
对比之下，通过原生语言造轮子有以下好处：
1. 使用原生语言编写的插件，自身不会受依赖的插件的使用场景而影响自身的使用（现在依赖 jQuery 的插件非常不适合开
发单页面应用），所以使用上更加灵活；
2. 搭配模块化开发，使用原生语言开发的插件可以只专注一个功能，所以代码量可以很少；
3. 最后，随着 JS/CSS/HTML 的发展以及浏览器不断迭代更新，现在使用原生语言编写插件的开发成本越来越低，那为什
么不呢？
2）实现原理及代码架构）实现原理及代码架构
2.1 实现原理
实现原理见下图：容器及容器内的页面取当前可视区高度，同时容器的父级元素 overflow 属性值设为 hidden ，通过更改容器
top 值实现全屏滚动效果。
2.2 代码架构
代码编写的思路是通过 class 定义全屏滚动类，使用时通过 new PureFullPage().init() 使用。
评论0
最新资源