Vue3封装自动滚动列表指令(含网页缩放滚动问题）

<element v-scroll.mouse="1.5"></element>

/**
 * main.ts
 */
import scrollDirective from '@/directive/scroll.ts';
...
const app = createApp(App);
// 注册指令
app.directive(scrollDirective.name, scrollDirective);
...

/**
 * scroll.ts
 */
 import { DirectiveBinding } from 'vue';
 export default {
     name: 'scroll',
     mounted: (el: HTMLElement, binding: DirectiveBinding) => {},
     unmounted: (el: HTMLElement, binding: DirectiveBinding) => {}
 }

/**
 * scroll.ts 
 */ 
import { DirectiveBinding } from 'vue';
// 我们会在DOM上拓展一些属性用于滚动动画的执行，这里拓展一下类型，方便编码
interface AnimationElement extends HTMLElement {
    speed: number;
}
const DEFAULT_SPEED = 1;
const RAF = window.requestAnimationFrame;
const CancelRAF = window.cancelAnimationFrame;
const elementScroll = (el: AnimationElement) => {
    const maxScrollTop = el.scrollHeight - el.clientHeight;
    // 根据当前滚动高度与滚动速度，计算出新的滚动高度
    const scrollTop =
        el.scrollTop + el.speed >= maxScrollTop // 超过最大滚动高度重置 --〉 从头再来
            ? 0
            : el.scrollTop + el.speed;
    // 执行滚动
    el.scrollTo({
        top: scrollTop
    });
    // 继续执行下一帧动画
    RAF(elementScroll.bind(null, el));
}
export default {
    name: 'scroll',
    mounted: (el: AnimationElement, binding: DirectiveBinding) => {
        const maxScrollTop = el.scrollHeight - el.clientHeight;
        // 没有滚动空间的时候，无需滚动，直接返回。
        if (maxScrollTop <= 0) {
            return;
        }
        // 将速度变量存到DOM中，方便后续动画函数取用
        el.speed = binding.value || DEFAULT_SPEED;
        // 使用RAF调用动画函数
        RAF(elementScroll.bind(null, el));
    },
    unmounted: (el: HTMLElement, binding: DirectiveBinding) => {}
}

<template>
    <ul v-scroll class="w-[300px] h-[400px] overflow-auto bg-[darkcyan]">
        <li>1</li>
        <li>2</li>
        ...
    </ul>
</template>

<ul v-scroll="2" ...>

/**
 * scroll.ts 
 */ 
interface AnimationElement extends HTMLElement {
    speed: number;
    animationId: number;
}
...
const elementScroll = (el: AnimationElement) => {
    ...
    // 继续执行下一帧，并更新动画id
    el.animationId = RAF(elementScroll.bind(null, el));
}
// 鼠标移入暂停
const mouseEnterHandler = (el: AnimationElement) => {
    if (el.animationId) {
        // 取消动画
        CancelRAF(el.animationId);
        el.animationId = undefined;
    }
};
// 鼠标移出继续运行动画
const mouseLeaveHandler = (el: AnimationElement) =>
    (el.animationId = RAF(scrollElement.bind(null, el)));
export default {
    name: 'scroll',
    mounted: (el: AnimationElement, binding: DirectiveBinding) => {
        ...
        // 修改原来初始化运行动画的语句，将RAF结果存到el中，方便暂停动画时使用
        el.animationId = RAF(scrollElement.bind(null, el));
        // 检测是否传递修饰符，传递了监听鼠标移入移出动画
        if (binding.modifiers.mouse) {
            el.addEventListener('mouseenter', mouseEnterHandler.bind(null, el));
            el.addEventListener('mouseleave', mouseLeaveHandler.bind(null, el));
        }
    },
    unmounted: (el: HTMLElement, binding: DirectiveBinding) => {
        // 别忘了DOM解绑时解除事件监听
        if (binding.modifiers.mouse) {
            el.removeEventListener(
                'mouseenter',
                mouseEnterHandler.bind(null, el)
            );
            el.removeEventListener(
                'mouseleave',
                mouseLeaveHandler.bind(null, el)
            );
        }
    }
}

<template>
    <ul v-scroll.mouse class="w-[300px] h-[400px] overflow-auto bg-[darkcyan]">
        <li>1</li>
        <li>2</li>
        ...
    </ul>
</template>

/**
 * 自动滚动
 *
 * 修饰符：
 * mouse 支持鼠标移入移出暂停动画
 */
import { DirectiveBinding } from 'vue';
interface AnimationElement extends HTMLElement {
    speed: number;
    animationId: number;
    cacheScrollTop: number; // 存放我们缓存的scrollTop
}
const RAF = window.requestAnimationFrame;
const CancelRAF = window.cancelAnimationFrame;
const scrollElement = (el: AnimationElement) => {
    const maxScrollTop = el.scrollHeight - el.clientHeight;
    // 直接在缓存滚动高度上进行计算
    el.cacheScrollTop =
        el.cacheScrollTop + el.speed >= maxScrollTop
            ? 0
            : el.cacheScrollTop + el.speed;
    // 将缓存高度设置为当前滚动高度
    el.scrollTo({
        top: el.cacheScrollTop
    });
    // 执行下一帧
    el.animationId = RAF(scrollElement.bind(null, el));
};
// 鼠标移入暂停
const mouseEnterHandler = (el: AnimationElement) => {
    if (el.animationId) {
        CancelRAF(el.animationId);
        el.animationId = undefined;
    }
};
// 鼠标移出继续运行
const mouseLeaveHandler = (el: AnimationElement) =>
    (el.animationId = RAF(scrollElement.bind(null, el)));
// 处理用户的滚动事件
const elementScrollHandler = (el: AnimationElement) =>
    (el.cacheScrollTop = el.scrollTop);
export default {
    name: 'scroll',
    mounted: (el: AnimationElement, binding: DirectiveBinding) => {
        const maxScrollTop = el.scrollHeight - el.clientHeight;
        // 无需滚动（这里 - 1因为scrollHeight会四舍五入）
        if (maxScrollTop - 1 <= 0) {
            return;
        }
        // 滚动速度
        el.speed = binding.value || 1;
        el.cacheScrollTop = 0;
        el.animationId = RAF(scrollElement.bind(null, el));
        // PS:因为我们使用 cacheScrollTop 来代替 el.scrollTop 处理滚动高度，所以这里需要同步一下用户滚动操作后的 scrollTop ==> 而为了保持动画连贯与流畅，这里千万不要去防抖/节流！
        el.addEventListener('scroll', elementScrollHandler.bind(null, el));
        // 鼠标移入暂停移出继续运动
        if (binding.modifiers.mouse) {
            el.addEventListener('mouseenter', mouseEnterHandler.bind(null, el));
            el.addEventListener('mouseleave', mouseLeaveHandler.bind(null, el));
        }
    },
    unmounted: (el: AnimationElement, binding: DirectiveBinding) => {
        if (binding.modifiers.mouse) {
            el.removeEventListener(
                'mouseenter',
                mouseEnterHandler.bind(null, el)
            );
            el.removeEventListener(
                'mouseleave',
                mouseLeaveHandler.bind(null, el)
            );
        }
    }
};