鼠标滚轮交互工具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，表示当前交互进程占交互元素高度的百分比。