单页/全屏滚动页面越来越常见了，它多用于产品介绍、招聘等内容较少的简单页面。针对这种效果也出现了不少 jquery 插件，如之间介绍的 fullPage.js 和 Scrollify，今天再介绍一款 jQuery 单页/全屏滚动插件——onepage-scroll。
onepage-scroll特点
onepage-scroll 还算小巧，min 版本仅 9kb，它有如下功能、特点：
- （不）显示右侧圆点项目导航
- （不）显示命名锚记
- 循环/禁止循环
- 回退（使用浏览器自带滚动）/指定回退
- 支持键盘控制，左右上下/ Page Up / Page Donw / Home / End 等
- 水平/横向滚动
- 回调函数
onepage-scroll兼容
onepage-scroll 使用了 css3 transform 属性，所以不兼容 IE10 以下的浏览器。你可以设置 responsiveFallback: true 使页面在 IE8、IE9 中能够正常浏览。
onepage-scroll使用
1、引入文件
<link rel="stylesheet" href="css/onepage-scroll.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.onepage-scroll.min.js"></script>
2、html
<div>
<section>第一屏</section>
<section>第二屏</section>
<section>第三屏</section>
<section>第四屏</section>
</div>
3、JavaScript
$(function(){
$('.main').onepage_scroll();
});
onepage-scroll配置
基本属性/方法
| 属性/方法 | 类型 | 默认值 | 说明 |
|---|
| sectionContainer | 字符串 | section | 绑定/制定元素，可以是标签或 class |
| easing | 字符串 | ease | 动画过度效果，可选 ease / linear / ease-in |
| animationTime | 整数 | 1000 | 动画过度时间，以毫秒为单位 |
| pagination | 布尔值 | true | 显示右侧圆点项目导航 |
| updateURL | 布尔值 | false | URL 显示命名锚记 |
| beforeMove | 函数 | | 滚动前的回调函数 |
| afterMove | 函数 | | 滚动后的回调函数 |
| loop | 布尔值 | true | 循环滚动 |
| keyboard | 布尔值 | true | 键盘控制，支持左右上下/ Page Up / Page Donw / Home / End |
| responsiveFallback | 布尔值/整数 | false | 回退，即使用浏览器自带滚动，默认我 false，既不使用浏览器自带滚动。也可以指定一个固定值，当页面的宽度小于这个值时，将自动回退 |
| direction | 字符串 | vertical | 页面滚动方向，可选 vertical（垂直/竖向）和 horizontal（水平/横向） |
公共方法
| 方法 | 说明 |
|---|
| moveUp() | 向上滚动 |
| moveDown() | 向下滚动 |
| moveTo(page_index) | 滚动到，如 $(‘.main’).moveTo(3); |
链接: https://fly63.com/nav/1389
