[代码样式]Scrollify – jQuery全屏滚动插件

脚本代码
20年10月23日
编辑

简介

和 fullPage.js 一样，Scrollify 也是一款基于 jQuery 的全屏滚动插件。跟 fullPage.js 相比，Scrollify 更加小巧，压缩后不足 4KB。但功能上不如 fullPage.js 强大，对移动设备的支持也不如 fullPage.js。不过对于一般的情况，Scrollify 是完全可以胜任的，它支持自定义锚链接、设置过度效果、偏移、是否显示滚动条、回调函数以及 fullPage.js 没有的局部滚动。

兼容

jQuery 兼容

兼容 1.7 及以上版本。

浏览器兼容


IE9 及以上 ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

使用方法

1、引入文件

<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/jquery.easing.js"></script>
<script src="https://www.dowebok.com/js/jquery.scrollify.min.js"></script>

2、HTML

<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>

3、JavaScript

$(function() {
    $('.panel').css({'height': $(window).height()});
    $.scrollify({
        section: '.panel'
    });
});

配置

属性/方法	类型	默认值	说明
section	字符串	section	滚动元素的选择器
sectionName	字符串	section-name	自定义锚链接，需要通过 HTML data 属性 data-section-name 指定，如 data-section-name=”home”
easing	字符串	easeOutExpo	过度效果
scrollSpeed	整数	1100	过度/滚动时间，以毫秒为单位
offset	整数	0	偏移，
scrollbars	布尔值	true	是否显示滚动条
before	函数	控制	滚动前的回调函数
after	函数	控制	滚动后的回调函数