Scrollify – jQuery全屏滚动插件

插件应用

浏览数:1,336

2017-12-12

简介

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

插件地址

jquery整屏滚动插件

使用方法

1、引入文件




2、HTML

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 函数 控制 滚动后的回调函数