useHorizontal

将竖向滚轮（wheel）事件转换为横向滚动，常用于横向时间轴、卡片长廊等场景。支持 RTL 布局与步长配置。

基础用法

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

查看代码

<template>
    <div
        ref="scrollContainerRef"
        style="display: flex; gap: 8px; overflow-x: auto; padding: 12px; background: #fafafa; border-radius: 8px"
    >
        <div
            v-for="n in 20"
            :key="n"
            style="
                flex: 0 0 auto;
                width: 80px;
                height: 80px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #646cff;
                color: #fff;
                border-radius: 8px;
            "
        >
            {{ n }}
        </div>
    </div>
</template>

<script setup lang="ts">
import { useHorizontal } from "@a-drowned-fish/rox-v";

const { scrollContainerRef } = useHorizontal({ step: 15 });
</script>

签名

function useHorizontal(options?: UseHorizontalOptions): { scrollContainerRef: Ref<HTMLElement | null> };

interface UseHorizontalOptions {
    queryCondition?: string; // 选择器，优先于 scrollContainerRef
    step?: number; // 每次滚动步长，默认 15
    dir?: "rtl" | "ltr"; // 滚动方向
    allowWheel?: boolean; // 是否拦截滚轮，默认 true
}

返回值

字段	说明
scrollContainerRef	绑定到目标滚动容器的模板 ref

说明

• 仅当 |deltaX| <= |deltaY| 时接管滚动，避免与已有横向滚动冲突；deltaY !== 0 时会 preventDefault。
• 组件卸载时自动移除监听器。