// 鼠标滚轮事件
getWheelDelta(event) {
if (event.wheelDelta) {
return event.wheelDelta;
} else {
// 兼容火狐
return -event.detail;
}
},
有了滚动事件，就可以据此编写页面向上或者向下滚动的回调函数了，如下：
// 鼠标滚动逻辑（全屏滚动关键逻辑）
scrollMouse(event) {
let delta = utils.getWheelDelta(event);
// delta < 0，鼠标往前滚动，页面向下滚动
if (delta < 0) {
this.goDown();
} else {
this.goUp();
}
}
goDown 、 goUp 是页面滚动的逻辑代码，需要特别说明的是必须 判断滚动边界，保证容器中显示的始终是页面内容 ：
- 上边界容易确定，为 1 个页面（也即可视区）的高度，即如果容器当前的上外边框距离整个页面顶部的距离（这里此值正是容器的 offsetTop 值的绝对值，因为它父元素的 offsetTop 值都是 0 ）大于等于当前可视区高度时，才允许向上滚动，不然，就证明上面已经没有页面了，不允许继续向上滚动；
- 下边界为 n - 2 （n 表示全屏滚动的页面数） 个可视区的高度，当容器的 offsetTop 值的绝对值小于等于 n - 2 个可视区的高度时，表示还可以向下滚动一个页面。
具体代码如下：
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);
}
5.2 移动端
移动端需要判断是向上还是向下滑动，可以结合 touchstart （手指开始接触屏幕时触发） 和 touchend （手指离开屏幕时触发） 两个事件实现判断：分别获取两个事件开始触发时的 pageY 值，如果触摸结束时的 pageY 大于触摸开始时的 pageY ，表示手指向下滑动，对应页面向上滚动，反之亦然。