jQuery实现全屏滚动：原理、fullPage.js插件与自定义开发

作者：橙子时间：2026-10-29 19:22:29浏览：590

本文介绍基于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定制不同高度的全屏滚动。

以上就是本文的全部内容，希望对大家的学习有所帮助。

作者最新文章

JS脚本在App中运行报错怎么解决

2026-11-04 23:11:03

JS怎么使用padStart方法给数字补零

2026-11-04 11:12:03

JS是什么意思？JavaScript全称及基本定义

2026-11-04 08:05:29

JS 使用 toFixed(1) 保留一位小数的基本用法与注意事项

2026-11-03 18:34:57

JS字符串转整数：parseInt与Number的区别及用法

2026-11-03 17:26:54