useScrollToCenter

将容器内匹配的元素「最小化」滚动到视口中心。若元素已在视口中且未设置 force，则不滚动。

基础用法

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

查看代码

<template>
    <div>
        <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"
                :data-item="n"
                style="
                    flex: 0 0 auto;
                    width: 80px;
                    height: 80px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #42b883;
                    color: #fff;
                    border-radius: 8px;
                "
            >
                {{ n }}
            </div>
        </div>
        <div style="margin-top: 12px">
            <Button @click="scrollTo10">将第 10 项滚动到中心</Button>
        </div>
    </div>
</template>

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

const { scrollContainerRef, scroll } = useScrollToCenter();
const scrollTo10 = () => scroll("[data-item='10']");
</script>

签名

function useScrollToCenter(queryCondition?: string): {
    scrollContainerRef: Ref<HTMLElement | null>;
    scroll: (selectorCondition: string, options?: ScrollOptions) => void;
};

interface ScrollOptions {
    behavior?: ScrollBehavior; // 默认 "smooth"
    direction?: "vertical" | "horizontal"; // 默认 "horizontal"
    force?: boolean; // 是否强制滚动，默认 false
    dir?: "rtl" | "ltr" | "auto"; // 书写方向，默认 "auto"（按容器实际 direction 计算）
}

返回值

字段	说明
scrollContainerRef	滚动容器模板 ref（也可以 queryCondition 选择器指定）
scroll	(selectorCondition, options) 滚动到匹配元素中心

说明

• 同时支持横向与纵向，并对 RTL 布局做了 scrollLeft 符号归一化。
• 若不传 queryCondition，则使用 scrollContainerRef 作为容器。