本文介绍基于jQuery实现全屏滚动的两种方案：一是使用fullPage.js插件，支持鼠标、键盘及触摸控制，配置灵活；二是通过监听mousewheel事件结合jquery-mousewheel插件自定义实现，重点解析delta参数判断滚动方向与速度，适用于需要定制高度或交互的场景。
引言
在许多应用场景中，尤其是移动端网页开发，实现页面的全屏滚动效果十分常见。本文将简要阐述全屏滚动的实现原理及相关技术。
全屏滚动原理
一、全屏滚动的核心原理 1. 动态获取屏幕高度。
通过JavaScript动态计算屏幕高度，并将每一屏的高度设置为与屏幕高度一致。
2. 监听鼠标滚轮事件。
监听mousewheel事件，根据滚轮滚动的方向（向上或向下）控制页面滚动至上一屏或下一屏。
fullPage.js插件介绍
二、jQuery插件fullPage.js介绍 fullPage.js是一款基于jQuery的全屏滚动插件，能够轻松创建全屏网站，主要功能包括：
- 支持鼠标滚动操作
- 支持前进、后退及键盘控制
- 提供多个回调函数接口
- 支持手机及平板设备的触摸事件
- 支持CSS3动画效果
- 支持浏览器窗口缩放
- 窗口缩放时自动调整布局
- 可配置滚动宽度、背景颜色、滚动速度、循环选项、回调函数、文本对齐方式等参数
fullPage.js使用方法
使用方法
1、引入必要文件
<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
2、HTML结构
<div id="dowebok">
<div class="section">
<h3>第一屏</h3>
</div>
<div class="section">
<h3>第二屏</h3>
</div>
<div class="section">
<h3>第三屏</h3>
</div>
<div class="section">
<h3>第四屏</h3>
</div>
</div>
每个section代表一屏，默认显示“第一屏”。若需指定加载页面时显示的初始屏幕，可在对应的section元素上添加class=”active”属性，例如：
<div class="section active">第三屏</div>
此外，可以在section内部添加slide元素以实现左右滑动效果，例如：
<div id="fullpages">
<div class="section">第一屏</div>
<div class="section">第二屏</div>
<div class="section">
<div class="slide">第三屏的第一屏</div>
<div class="slide">第三屏的第二屏</div>
<div class="slide">第三屏的第三屏</div>
<div class="slide">第三屏的第四屏</div>
</div>
<div class="section">第四屏</div>
</div>
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定制不同高度的全屏滚动。
以上就是本文的全部内容，希望对大家的学习有所帮助。