使用jQuery的Scrollify插件實現鼠標滾輪或者手勢滑動到頁面下一節點部分

時間 2019-11-06

標籤使用 jquery scrollify 插件實現鼠標滾輪或者手勢滑動頁面下一節點部分欄目 JQuery 简体版

原文原文鏈接

有時咱們須要作一個單頁面介紹產品特性，而單頁面內容很是多且頁面很是長，爲了快速定位到產品特性節點，咱們使用js偵聽用戶滾輪事件，當用戶觸發滾輪滑動或者使用手勢觸屏滑動時，便可定位到相應的節點。一款jQuery插件叫Scrollify幫咱們作到了。html

Scrollify須要jQuery 1.6+以及緩衝動畫easing插件配合來實現。HTML基本結構以下：html5

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>scrollify</title> 
<!--[if lt IE 9]> 
<script src="html5shiv.min.js"></script> 
<![endif]--> 
<script src="jquery.js"></script> 
<script src="jquery.easing.min.js"></script> 
<script src="jquery.scrollify.min.js"></script> 
<script> 
    $(function() { 
        $.scrollify({ 
            section : "section", 
        }); 
    }); 
</script> 
</head> 
<body> 
    <section></section> 
    <section></section> 
</body> 
</html>

如下是scrollify的默認選項配置：jquery

$.scrollify({ 
        section : "section", 
        sectionName : "section-name", 
        easing: "easeOutExpo", 
        scrollSpeed: 1100, 
        offset : 0, 
        scrollbars: true, 
        before:function() {}, 
        after:function() {} 
});

選項說明：

section：節點部分選擇器.
sectionName：每個section節點對應的data屬性.
easing：定義緩衝動畫.
offset：定義每一個色彩tion節點的偏移量.
scrollbars：是否顯示滾動條.
before：回調函數,滾動開始前觸發.
after：回調函數,滾動完成後觸發.瀏覽器

Scrollify還提供了方法調用，如：函數