在很多情况下，我们需要页面的全屏滚动，尤其是移动端。今天简要的介绍一下全屏滚动的知识。
一.全屏滚动的原理
1.js动态获取屏幕的高度。
获取屏幕的高度，设置每一屏幕的高度。
2.监听mousewheel事件。
监听mousewheel事件，并判断滚轮的方向，向上或向下滚动一屏。
二.jquery插件fullpages介绍
fullpage.js 是一个基于 jquery 的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有：
支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机、平板触摸事件 支持 css3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等使用方法
1、引入文件

2、html
第一屏
第二屏
第三屏
第四屏

每个 section 代表一屏，默认显示“第一屏”，如果要指定加载页面时显示的“屏幕”，可以在对应的 section 加上class=”active”，如：
第三屏

同时，可以在 section 内加入 slide(左右滑动)，如：
第一屏
第二屏
第三屏的第一屏
第三屏的第二屏
第三屏的第三屏
第三屏的第四屏
第四屏

3、javascript
$(function(){ $('#fullpages').fullpage();});
可以进行跟多的配置：
$(document).ready(function() { $('#fullpages').fullpage({ //navigation menu: '#menu', lockanchors: false, anchors:['firstpage', 'secondpage'], navigation: false, navigationposition: 'right', navigationtooltips: ['firstslide', 'secondslide'], showactivetooltip: false, slidesnavigation: true, slidesnavposition: 'bottom', //scrolling css3: true, scrollingspeed: 700, autoscrolling: true, fittosection: true, fittosectiondelay: 1000, scrollbar: false, easing: 'easeinoutcubic', easingcss3: 'ease', loopbottom: false, looptop: false, loophorizontal: true, continuousvertical: false, normalscrollelements: '#element1, .element2', scrolloverflow: false, touchsensitivity: 15, normalscrollelementtouchthreshold: 5, //accessibility keyboardscrolling: true, animateanchor: true, recordhistory: true, //design controlarrows: true, verticalcentered: true, resize : false, sectionscolor : ['#ccc', '#fff'], paddingtop: '3em', paddingbottom: '10px', fixedelements: '#header, .footer', responsivewidth: 0, responsiveheight: 0, //custom selectors sectionselector: '.section', slideselector: '.slide', //events onleave: function(index, nextindex, direction){}, afterload: function(anchorlink, index){}, afterrender: function(){}, afterresize: function(){}, afterslideload: function(anchorlink, index, slideanchor, slideindex){}, onslideleave: function(anchorlink, index, slideindex, direction, nextslideindex){} });});
三.动手写全屏滚动
这里主要介绍监听mousewheel事件及滚动。
由于mousewheel事件的兼容性，引用jquery-mousewheel插件来监听滚轮事件。
通过参数delta可以获取鼠标滚轮的方向和速度（旧版本需要传delta参数，新版本不需要，直接用event取）。如果delta的值是负的，那么滚轮就是向下滚动，正的就是向上。
// using on$('#my_elem').on('mousewheel', function(event) { console.log(event.deltax, event.deltay, event.deltafactor);});// using the event helper$('#my_elem').mousewheel(function(event) { console.log(event.deltax, event.deltay, event.deltafactor);});
可以根据需求使用fullpages实现全屏滚动（上下，左右），也可以使用jquery-mousewheel定制不同高度的全屏滚动。
以上就是本文的全部内容，希望对大家的学习有所帮助。