scrolling-controller

下拉列表滚动控制器 > * 支持控制每次滚动落点相对位置与上一落点相同 > * 支持任意高度的着点元素,或者不同高度的着点元素 > * 支持循环选中

Usage no npm install needed!

<script type="module">
  import scrollingController from 'https://cdn.skypack.dev/scrolling-controller';
</script>

README

ScrollingController

  • 下拉列表滚动控制器
  • 支持控制每次滚动落点相对位置与上一落点相同
  • 支持任意高度的着点元素,或者不同高度的着点元素
  • 支持循环选中

使用方式

npm install scrolling-controller

    import ScrollingController from 'scrolling-controller'

    let scrolling_controller = new ScrollingController(
        scroll_view, //任意 overflow-y: auto; 容器
        {
            mesh_value: 1,  //mac平台 mouseMove 事件监听范围超出监听容器大小1px左右(估计是超高分辨率所致),这个值用于配置监听冗余兼容的范围(默认为1)
            throttle: 80,   //默认不启用节流,true 为默认值 80 ms,可以指定任意毫秒值(0.0.3之后这个值也用于滚轮 delta 值的节流)
            mark: "gallery-item",   //指定做了 data-type={mark} 标记的可着点元素
            onSelected(index){}  //每次选择更改都会被回调
        }
    );

    window.addEventListener("keydown", (e) => {
        switch (e.key) {
            case "ArrowUp":
                scrolling_controller.prevChoice()   //选中上一项,如果没有上一项则选中最后一项
                break;
            case "ArrowDown":
                scrolling_controller.nextChoice()   //选择下一项,如果没有下一项则选中第一项
                break;

        }
    });

    scrolling_controller.index = 3; //直接更改当前选中项