鼠標滾輪交互工具scrollama簡單使用

Github：https://github.com/russellgoldenberg/scrollama

缺點：無法識別svg內的元素

初始化滾動控制器：

let scroller = scrollama();

啓用功能

scroller.setup({
    // 設置啓動參數
    step: "#id",         // 選擇器或DOM元素集合，用於指定觸發交互的元素（必選）
    offset: 0.5,         // 觸發區域距離視口頂端佔視口高度的比例（默認爲0.5）
    progress: false,     // 是否在交互區域時觸發事件（默認爲false）
    threshold: 0.4,      // （默認爲0.4）
    order: true,         // 如果被跳過，是否觸發上一步交互（默認爲true）
    once: false,         // 是否是一次性的交互（回調函數調用一次後移除監聽器）（默認爲false）
    debug: false         // 調試模式，是否顯示輔助線（默認爲false）
}).onStepEnter(function (res) {
    // 進入交互區的操作
}).onStepExit(function (res) {
    // 離開交互區的操作
}).onStepProgress(function (res) {
    // 在交互區的操作
});

其中，進入和離開的回調函數（onStepEnter, onStepExit,）的參數res都是一個對象，包含三個字段：

字段名	含義
element	觸發交互的元素
index	觸發交互元素的編號
direction	觸發交互時滾動的方向

onStepProgress的res對象略有不用，它沒有direction字段，而是變成了progress，表示當前交互進程佔交互元素高度的百分比。