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

/**
 * main.ts
 */
import scrollDirective from '@/directive/scroll.ts';
...
const app = createApp(App);
// 注冊(cè)指令
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';
// 我們會(huì)在DOM上拓展一些屬性用于滾動(dòng)動(dòng)畫的執(zhí)行，這里拓展一下類型，方便編碼
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;
    // 根據(jù)當(dāng)前滾動(dòng)高度與滾動(dòng)速度，計(jì)算出新的滾動(dòng)高度
    const scrollTop =
        el.scrollTop + el.speed >= maxScrollTop // 超過最大滾動(dòng)高度重置 --〉 從頭再來
            ? 0
            : el.scrollTop + el.speed;
    // 執(zhí)行滾動(dòng)
    el.scrollTo({
        top: scrollTop
    });
    // 繼續(xù)執(zhí)行下一幀動(dòng)畫
    RAF(elementScroll.bind(null, el));
}
export default {
    name: 'scroll',
    mounted: (el: AnimationElement, binding: DirectiveBinding) => {
        const maxScrollTop = el.scrollHeight - el.clientHeight;
        // 沒有滾動(dòng)空間的時(shí)候，無需滾動(dòng)，直接返回。
        if (maxScrollTop <= 0) {
            return;
        }
        // 將速度變量存到DOM中，方便后續(xù)動(dòng)畫函數(shù)取用
        el.speed = binding.value || DEFAULT_SPEED;
        // 使用RAF調(diào)用動(dòng)畫函數(shù)
        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) => {
    ...
    // 繼續(xù)執(zhí)行下一幀，并更新動(dòng)畫id
    el.animationId = RAF(elementScroll.bind(null, el));
}
// 鼠標(biāo)移入暫停
const mouseEnterHandler = (el: AnimationElement) => {
    if (el.animationId) {
        // 取消動(dòng)畫
        CancelRAF(el.animationId);
        el.animationId = undefined;
    }
};
// 鼠標(biāo)移出繼續(xù)運(yùn)行動(dòng)畫
const mouseLeaveHandler = (el: AnimationElement) =>
    (el.animationId = RAF(scrollElement.bind(null, el)));
export default {
    name: 'scroll',
    mounted: (el: AnimationElement, binding: DirectiveBinding) => {
        ...
        // 修改原來初始化運(yùn)行動(dòng)畫的語句，將RAF結(jié)果存到el中，方便暫停動(dòng)畫時(shí)使用
        el.animationId = RAF(scrollElement.bind(null, el));
        // 檢測(cè)是否傳遞修飾符，傳遞了監(jiān)聽鼠標(biāo)移入移出動(dòng)畫
        if (binding.modifiers.mouse) {
            el.addEventListener('mouseenter', mouseEnterHandler.bind(null, el));
            el.addEventListener('mouseleave', mouseLeaveHandler.bind(null, el));
        }
    },
    unmounted: (el: HTMLElement, binding: DirectiveBinding) => {
        // 別忘了DOM解綁時(shí)解除事件監(jiān)聽
        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>

/**
 * 自動(dòng)滾動(dòng)
 *
 * 修飾符：
 * mouse 支持鼠標(biāo)移入移出暫停動(dòng)畫
 */
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;
    // 直接在緩存滾動(dòng)高度上進(jìn)行計(jì)算
    el.cacheScrollTop =
        el.cacheScrollTop + el.speed >= maxScrollTop
            ? 0
            : el.cacheScrollTop + el.speed;
    // 將緩存高度設(shè)置為當(dāng)前滾動(dòng)高度
    el.scrollTo({
        top: el.cacheScrollTop
    });
    // 執(zhí)行下一幀
    el.animationId = RAF(scrollElement.bind(null, el));
};
// 鼠標(biāo)移入暫停
const mouseEnterHandler = (el: AnimationElement) => {
    if (el.animationId) {
        CancelRAF(el.animationId);
        el.animationId = undefined;
    }
};
// 鼠標(biāo)移出繼續(xù)運(yùn)行
const mouseLeaveHandler = (el: AnimationElement) =>
    (el.animationId = RAF(scrollElement.bind(null, el)));
// 處理用戶的滾動(dòng)事件
const elementScrollHandler = (el: AnimationElement) =>
    (el.cacheScrollTop = el.scrollTop);
export default {
    name: 'scroll',
    mounted: (el: AnimationElement, binding: DirectiveBinding) => {
        const maxScrollTop = el.scrollHeight - el.clientHeight;
        // 無需滾動(dòng)（這里 - 1因?yàn)閟crollHeight會(huì)四舍五入）
        if (maxScrollTop - 1 <= 0) {
            return;
        }
        // 滾動(dòng)速度
        el.speed = binding.value || 1;
        el.cacheScrollTop = 0;
        el.animationId = RAF(scrollElement.bind(null, el));
        // PS:因?yàn)槲覀兪褂?cacheScrollTop 來代替 el.scrollTop 處理滾動(dòng)高度，所以這里需要同步一下用戶滾動(dòng)操作后的 scrollTop ==> 而為了保持動(dòng)畫連貫與流暢，這里千萬不要去防抖/節(jié)流！
        el.addEventListener('scroll', elementScrollHandler.bind(null, el));
        // 鼠標(biāo)移入暫停移出繼續(xù)運(yùn)動(dòng)
        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)
            );
        }
    }
};