![[代码样式]onepage-scroll – jQuery单页/全屏滚动插件](https://www.weimahe.com/wp-content/uploads/2020/08/AyBxem1634.png "[代码样式]onepage-scroll – jQuery单页/全屏滚动插件")
简介
单页/全屏滚动页面越来越常见了，它多用于产品介绍、招聘等内容较少的简单页面。针对这种效果也出现了不少 jQuery 插件，如之间介绍的 fullPage.js 和 Scrollify，今天再介绍一款 jQuery 单页/全屏滚动插件——onepage-scroll。
onepage-scroll 还算小巧，min 版本仅 9kb，它有如下功能、特点：
- （不）显示右侧圆点项目导航
- （不）显示命名锚记
- 循环/禁止循环
- 回退（使用浏览器自带滚动）/指定回退
- 支持键盘控制，左右上下/ Page Up / Page Donw / Home / End 等
- 水平/横向滚动
- 回调函数
兼容
jQuery 兼容
兼容 jQuery 1.4.3+，建议使用 1.9+ 版本，效率更高。
浏览器兼容
![[代码样式]onepage-scroll – jQuery单页/全屏滚动插件](https://www.weimahe.com/wp-content/uploads/2020/08/IzDcBo1563.png "[代码样式]onepage-scroll – jQuery单页/全屏滚动插件"){kind=small} |
![[代码样式]onepage-scroll – jQuery单页/全屏滚动插件](https://www.weimahe.com/wp-content/uploads/2020/08/IirTfA1563.png "[代码样式]onepage-scroll – jQuery单页/全屏滚动插件"){kind=small} |
![[代码样式]onepage-scroll – jQuery单页/全屏滚动插件](https://www.weimahe.com/wp-content/uploads/2020/08/WcmnA81563.png "[代码样式]onepage-scroll – jQuery单页/全屏滚动插件"){kind=small} |
![[代码样式]onepage-scroll – jQuery单页/全屏滚动插件](https://www.weimahe.com/wp-content/uploads/2020/08/rsS4Fl1563.png "[代码样式]onepage-scroll – jQuery单页/全屏滚动插件"){kind=small} |
![[代码样式]onepage-scroll – jQuery单页/全屏滚动插件](https://www.weimahe.com/wp-content/uploads/2020/08/iFqT6I1563.png "[代码样式]onepage-scroll – jQuery单页/全屏滚动插件"){kind=small} |
|---|---|---|---|---|
| IE10+ ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
onepage-scroll 使用了 CSS3 transform 属性，所以不兼容 IE10 以下的浏览器。你可以设置 responsiveFallback: true 使页面在 IE8、IE9 中能够正常浏览。
使用方法
1、引入文件
<link rel="stylesheet" href="https://www.dowebok.com/css/onepage-scroll.css" rel="external nofollow" > <script src="https://www.dowebok.com/js/jquery.min.js"></script> <script src="https://www.dowebok.com/js/jquery.onepage-scroll.min.js"></script>
2、HTML
<div class="main"> <section>第一屏</section> <section>第二屏</section> <section>第三屏</section> <section>第四屏</section> </div>
3、JavaScript
$(function(){
$('.main').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); |
相关阅读
- jQuery全屏滚动插件fullPage.js
- 用fullPage.js制作百度百科史记2013效果
- 用fullPage.js制作搜狐快站页面效果
- fullPage.js制作网易邮箱6.0介绍页面
- Scrollify – jQuery全屏滚动插件
Github 地址：https://github.com/peachananr/onepage-scroll
[b2_file link="
百度网盘" name="onepage-scroll – jQuery单页/全屏滚动插件" pass="" code=""]
