如何使用ES6写全屏滚动插件

这篇文章主要为大家展示了“如何使用ES6写全屏滚动插件”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用ES6写全屏滚动插件”这篇文章吧。

10年积累的成都做网站、成都网站设计、成都外贸网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有栾川免费网站建设让你可以放心的选择与我们合作。

1）前面的话

现在已经有很多全屏滚动插件了，比如著名的 fullPage ，那为什么还要自己造轮子呢？

现有轮子有以下问题：

首先，最大的问题是最流行的几个插件都依赖 jQuery，这意味着在使用 React 或者 Vue 的项目中使用他们是一件十分蛋疼的事：我只需要一个全屏滚动功能，却还需要把 jQuery 引入，有种杀鸡使用宰牛刀的感觉；
其次，现有的很多全屏滚动插件功能往往都十分丰富，这在前几年是优势，但现在（2018-5）可以看作是劣势：前端开发已经发生了很大变化，其中很重要的一个变化是 ES6 原生支持模块化开发，模块化开发最大的特点是一个模块最好只专注做好一件事，然后再拼成一个完整的系统，从这个角度看，大而全的插件有悖模块化开发的原则。

对比之下，通过原生语言造轮子有以下好处：

使用原生语言编写的插件，自身不会受依赖的插件的使用场景而影响自身的使用（现在依赖 jQuery 的插件非常不适合开发单页面应用），所以使用上更加灵活；
搭配模块化开发，使用原生语言开发的插件可以只专注一个功能，所以代码量可以很少；
最后，随着 JS/CSS/HTML 的发展以及浏览器不断迭代更新，现在使用原生语言编写插件的开发成本越来越低，那为什么不呢？

2）实现原理及代码架构

2.1 实现原理

实现原理见下图：容器及容器内的页面取当前可视区高度，同时容器的父级元素 overflow 属性值设为 hidden ，通过更改容器 top 值实现全屏滚动效果。

如何使用ES6写全屏滚动插件

2.2 代码架构

代码编写的思路是通过 class 定义全屏滚动类，使用时通过 new PureFullPage().init() 使用。

/**
 * 全屏滚动类
 */
class PureFullPage {
 // 构造函数
 constructor() {}

 // 原型方法
 methods() {}

 // 初始化函数
 init() {}
}

3）html 结构

鉴于上述实现原理，对于 html 的结构有特定要求，如下：页面容器为 #pureFullPageContainer ，所有的页面为其直接子元素，这里为了方便，直接取 body 为其直接父元素。

body { /* body 为容器直接的父元素 */ overflow: hidden; } #pureFullPage { /* 只有当 position 的值不是 static 时，top 值才有效 */ position: relative; /* 设置初始值 */ top: 0; } .page { /* 此处不能为 100vh，后面详述 */ /* 其父元素，也就是 #pureFullPage 的高度，通过 js 动态设置*/ height: 100%; }

// 鼠标滚动逻辑（全屏滚动关键逻辑） scrollMouse(event) { let delta = utils.getWheelDelta(event); // delta < 0，鼠标往前滚动，页面向下滚动 if (delta < 0) { this.goDown(); } else { this.goUp(); } }

goUp() { // 只有页面顶部还有页面时页面向上滚动 if (-this.container.offsetTop >= this.viewHeight) { // 重新指定当前页面距视图顶部的距离 currentPosition，实现全屏滚动， // currentPosition 为负值，越大表示超出顶部部分越少 this.currentPosition = this.currentPosition + this.viewHeight; this.turnPage(this.currentPosition); } } goDown() { // 只有页面底部还有页面时页面向下滚动 if (-this.container.offsetTop <= this.viewHeight * (this.pagesNum - 2)) { // 重新指定当前页面距视图顶部的距离 currentPosition，实现全屏滚动， // currentPosition 为负值，越小表示超出顶部部分越多 this.currentPosition = this.currentPosition - this.viewHeight; this.turnPage(this.currentPosition); } }

// 鼠标滚轮监听，火狐鼠标滚动事件不同其他 if (navigator.userAgent.toLowerCase().indexOf('firefox') === -1) { document.addEventListener('mousewheel', scrollMouse); } else { document.addEventListener('DOMMouseScroll', scrollMouse); }

// 手指接触屏幕 document.addEventListener('touchstart', event => { this.startY = event.touches[0].pageY; }); //手指离开屏幕 document.addEventListener('touchend', event => { let endY = event.changedTouches[0].pageY; if (endY - this.startY < 0) { // 手指向上滑动，对应页面向下滚动 this.goDown(); } else { // 手指向下滑动，对应页面向上滚动 this.goUp(); } });

// 防抖动函数，method 回调函数，context 上下文，event 传入的时间，delay 延迟函数 debounce(method, context, event, delay) { clearTimeout(method.tId); method.tId = setTimeout(() => { method.call(context, event); }, delay); }, // 截流函数，method 回调函数，context 上下文，delay 延迟函数， // immediate 传入 true 表示在 delay 开始时执行回调函数 throttle(method, context, delay, immediate) { return function() { const args = arguments; const later = () => { method.tID = null; if (!immediate) { method.apply(context, args); } }; const callNow = immediate && !method.tID; clearTimeout(method.tID); method.tID = setTimeout(later, delay); if (callNow) { method.apply(context, args); } }; },

// 设置截流函数 let handleMouseWheel = utils.throttle(this.scrollMouse, this, this.DELAY, true); // 鼠标滚轮监听，火狐鼠标滚动事件不同其他 if (navigator.userAgent.toLowerCase().indexOf('firefox') === -1) { document.addEventListener('mousewheel', handleMouseWheel); } else { document.addEventListener('DOMMouseScroll', handleMouseWheel); }

// 创建右侧点式导航 createNav() { const nav = document.createElement('div'); nav.className = 'nav'; this.container.appendChild(nav); // 有几页，显示几个点 for (let i = 0; i < this.pagesNum; i++) { nav.innerHTML += '

'; } const navDots = document.querySelectorAll('.nav-dot'); this.navDots = Array.prototype.slice.call(navDots); // 添加初始样式 this.navDots[0].classList.add('active'); // 添加点式导航点击事件 this.navDots.forEach((el, i) => { el.addEventListener('click', event => { // 页面跳转 this.currentPosition = -(i * this.viewHeight); this.turnPage(this.currentPosition); // 更改样式 this.navDots.forEach(el => { utils.deleteClassName(el, 'active'); }); event.target.classList.add('active'); }); }); }

constructor(options) { // 默认配置 const defaultOptions = { isShowNav: true, delay: 150, definePages: () => {}, }; // 合并自定义配置 this.options = Object.assign(defaultOptions, options); }

// window resize 时重新获取位置 getNewPosition() { this.viewHeight = document.documentElement.clientHeight; this.container.style.height = this.viewHeight + 'px'; let activeNavIndex; this.navDots.forEach((e, i) => { if (e.classList.contains('active')) { activeNavIndex = i; } }); this.currentPosition = -(activeNavIndex * this.viewHeight); this.turnPage(this.currentPosition); } handleWindowResize(event) { // 设置防抖动函数 utils.debounce(this.getNewPosition, this, event, this.DELAY); } // 窗口尺寸变化时重置位置 window.addEventListener('resize', this.handleWindowResize.bind(this));

// polyfill Object.assign polyfill() { if (typeof Object.assign != 'function') { Object.defineProperty(Object, 'assign', { value: function assign(target, varArgs) { if (target == null) { throw new TypeError('Cannot convert undefined or null to object'); } let to = Object(target); for (let index = 1; index < arguments.length; index++) { let nextSource = arguments[index]; if (nextSource != null) { for (let nextKey in nextSource) { if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { to[nextKey] = nextSource[nextKey]; } } } } return to; }, writable: true, configurable: true, }); } },

getWheelDelta(event) { if (event.wheelDelta) { // 第一次调用之后惰性载入，无需再做检测 this.getWheelDelta = event => event.wheelDelta; // 第一次调用使用 return event.wheelDelta; } else { // 兼容火狐 this.getWheelDelta = event => -event.detail; return -event.detail; } },

NEWS

网站建设资讯

如何使用ES6写全屏滚动插件

其他资讯