useScrollTo

适用于 Vue3、Nuxt3、HTML

使元素可自定义缓动

示例

纵向缓动

required hmph cemetery imaginary treaty well scarcely radio dam

panel aboard daily pro unlike relay since flake

onto ack each hydrolysis next onto times plumber possession

panhandle disallow upon espadrille er

aw which woot mutation yellow step-father duh stretch

quiet for fatally hateful phooey geez ballet how

yippee even yet yarmulke concerning

while hm indeed optimistically aw

among questionably duck canine loyally

inasmuch cohesion berry unless whenever yet quintessential tomorrow reproachfully

wetly whose everlasting truly yuck er underbid since instead

swiftly atop massive generally zebra

before blah ionize bewitched even handmade

guideline unto yahoo blah unto inside quarterly

anxiously comfort promptly tactics upliftingly rundown gadzooks notwithstanding

amaze tired unlike sans after medal

qua while aquaplane afore ew excepting

unto beyond oof enormously wholly er usually boo

gently anatomy trellis hockey apropos inwardly rotating doubtfully save quarrelsomely

woot kindheartedly via equally villainous as trial

wherever oof outside ha hardship gosh gasp

for swiftly except although wherever obediently if and

messy whereas chance antibody humor inasmuch nod oh campus near

yuck overreach metallic geez label furthermore supposing balance

fooey collapse because valiantly gee beyond open uh-huh opposite passionate

anenst meanwhile until insignificant including killer during uh-huh because

clang alongside since glistening in woot despite arrogantly

wet blah briskly yippee reapply teletype oddly shyly

illumine audit well-informed though defense magic pronunciation urgently pliers

eek veer puny offensively kindheartedly

before anenst save tomatillo for

and whoever beyond apropos blah ecstatic however correctly lull flowery

outmaneuver delegate horsewhip wick outside lanky afore

lest vivid phooey emery wherever or

until yarmulke who joyfully atop ride hmph questionably accept allow

bootie tame artistic pro wiggly blah annually user oh until

furthermore continually unabashedly coaxingly fooey studious perfect

gadzooks if that prizefight meh below wild incidentally fix failing

under bliss tarragon theism gah unlike wherever

silently stimulating whereas lecture yesterday that herring like

writhe predominate pish bleakly concerning weight correctly exercise

unfurl civilization rainbow ack lest

chase strict humble juicy where an old loosely

but unknown till meanwhile octave rosin

next shock strength eye tenderly gadzooks grave absentmindedly fairly yet

agitated blah after pierce beyond perfumed raw

inventory ack hmph regarding yum

helplessly unto sauce where coolly

snowflake swank to athwart icicle however helpfully since

criteria yowza shaft despair furthermore miracle loaf barring unexpectedly

查看代码

<script setup lang="ts">
import { ref } from "vue";
import { faker } from "@faker-js/faker/locale/en";
import { useMessage } from "../../components/message";
import { useScrollTo, debounce } from "@pureadmin/utils";

const scrollRef = ref();
const { message } = useMessage();

// 加个防抖。连续点击，只会执行第一次点击事件，立即执行
const onTop = debounce(
  () =>
    useScrollTo({
      el: scrollRef,
      to: 0,
      directions: "scrollTop",
      duration: 2000,
      callback: msg => {
        msg === "滚动完毕"
          ? message.success("已滚动到顶部")
          : message.info(msg);
      }
    }).start(),
  1200,
  true
);

const onBottom = debounce(
  () =>
    useScrollTo({
      el: scrollRef,
      to: scrollRef.value!.scrollHeight,
      directions: "scrollTop",
      duration: 2000,
      callback: msg => {
        msg === "滚动完毕"
          ? message.success("已滚动到底部")
          : message.info(msg);
      }
    }).start(),
  1200,
  true
);

const onTopShortly = () => {
  useScrollTo({ el: scrollRef, to: 0, directions: "scrollTop" }).start();
};

const onBottomShortly = () => {
  useScrollTo({
    el: scrollRef,
    to: scrollRef.value!.scrollHeight,
    directions: "scrollTop"
  }).start();
};

// 整页滚动
const onPageTop = debounce(
  () =>
    useScrollTo({
      el: document.documentElement,
      to: 0,
      directions: "scrollTop",
      duration: 800,
      callback: msg => {
        msg === "滚动完毕"
          ? message.success("整页已滚动到顶部")
          : message.info(msg);
      }
    }).start(),
  1200,
  true
);

const onPageBottom = debounce(
  () =>
    useScrollTo({
      el: document.documentElement,
      to: document.documentElement.scrollHeight,
      directions: "scrollTop",
      duration: 800,
      callback: msg => {
        msg === "滚动完毕"
          ? message.success("整页已滚动到底部")
          : message.info(msg);
      }
    }).start(),
  1200,
  true
);
</script>

<template>
  <naive-theme>
    <div
      ref="scrollRef"
      class="w-full h-[335px] mt-3 overflow-y-scroll border-solid border-1 border-[var(--vp-c-divider)] rounded-lg"
    >
      <div v-for="(_, index) in 50" :key="index" class="my-[10px]">
        <div class="flex items-center justify-start p-2 w-9/10 ml-3">
          <img
            class="rounded-lg w-[80px] mr-10"
            :src="`https://xiaoxian521.github.io/hyperlink/avatar/400*400_${
              index + 1
            }.jpg`"
          />
          <p>{{ faker.word.words({ count: { min: 5, max: 10 } }) }}</p>
        </div>
      </div>
    </div>
    <n-button tertiary size="small" class="mt-4" @click="onTop">
      滚动到顶部
    </n-button>
    <n-button tertiary size="small" class="mt-4 ml-2" @click="onBottom">
      滚动到底部
    </n-button>
    <br />
    <n-button tertiary size="small" class="mt-2" @click="onTopShortly">
      滚动到顶部（无缓动效果）
    </n-button>
    <n-button tertiary size="small" class="mt-2 ml-2" @click="onBottomShortly">
      滚动到底部（无缓动效果）
    </n-button>
    <br />
    <n-button tertiary size="small" class="mt-2" @click="onPageTop">
      整页滚动到顶部
    </n-button>
    <n-button tertiary size="small" class="mt-2 ml-2" @click="onPageBottom">
      整页滚动到底部
    </n-button>
  </naive-theme>
</template>

横向缓动

Mireille

Brandi

Elvis

Coralie

Myron

Alfonso

Keanu

Addison

Warren

Mauricio

Lillian

Novella

Anais

Terence

Jillian

Chelsea

Zackary

Dax

Nicholaus

Percy

Ila

Noe

Vidal

Alba

Herbert

Alisha

Georgette

Carlee

Micaela

Holly

Deshaun

Lonzo

Maribel

Imogene

Myah

Dorothy

Lenora

Jose

Dashawn

Florida

Alyce

Pete

Kendra

Hollis

Forrest

Curt

Ottilie

Shyanne

Aryanna

Dorian

查看代码

<script setup lang="ts">
import { ref } from "vue";
import { faker } from "@faker-js/faker/locale/en";
import { useMessage } from "../../components/message";
import { useScrollTo, debounce } from "@pureadmin/utils";

const scrollRef = ref();
const { message } = useMessage();

// 加个防抖。连续点击，只会执行第一次点击事件，立即执行
const onLeft = debounce(
  () =>
    useScrollTo({
      el: scrollRef,
      to: 0,
      directions: "scrollLeft",
      duration: 2000,
      callback: msg => {
        msg === "滚动完毕"
          ? message.success("已滚动到最左侧")
          : message.info(msg);
      }
    }).start(),
  1200,
  true
);

const onRight = debounce(
  () =>
    useScrollTo({
      el: scrollRef,
      to: scrollRef.value!.scrollWidth,
      directions: "scrollLeft",
      duration: 2000,
      callback: msg => {
        msg === "滚动完毕"
          ? message.success("已滚动到最右侧")
          : message.info(msg);
      }
    }).start(),
  1200,
  true
);

const onLeftShortly = () => {
  useScrollTo({ el: scrollRef, to: 0, directions: "scrollLeft" }).start();
};

const onRightShortly = () => {
  useScrollTo({
    el: scrollRef,
    to: scrollRef.value!.scrollWidth,
    directions: "scrollLeft"
  }).start();
};
</script>

<template>
  <naive-theme>
    <div
      ref="scrollRef"
      class="w-full my-3 overflow-x-scroll flex border-solid border-1 border-[var(--vp-c-divider)] rounded-lg"
    >
      <div
        v-for="(_, index) in 50"
        :key="index"
        class="shrink-0 text-center px-[20px] pt-[28px]"
      >
        <img
          class="rounded-lg w-[80px]"
          :src="`https://xiaoxian521.github.io/hyperlink/avatar/400*400_${
            index + 1
          }.jpg`"
        />
        <p>{{ faker.person.firstName() }}</p>
      </div>
    </div>
    <n-button tertiary size="small" class="mt-2" @click="onLeft">
      滚动到最左侧
    </n-button>
    <n-button tertiary size="small" class="mt-2 ml-2" @click="onRight">
      滚动到最右侧
    </n-button>
    <br />
    <n-button tertiary size="small" class="mt-2" @click="onLeftShortly">
      滚动到最左侧（无缓动效果）
    </n-button>
    <n-button tertiary size="small" class="mt-2 ml-2" @click="onRightShortly">
      滚动到最右侧（无缓动效果）
    </n-button>
  </naive-theme>
</template>

最简代码

整页滚动到顶部

<script setup lang="ts">
import { useScrollTo } from "@pureadmin/utils";

const onPageTop = () => {
  useScrollTo({
    el: document.documentElement,
    to: 0,
    directions: "scrollTop"
  }).start();
};
</script>

<template>
  <button @click="onPageTop">整页滚动到顶部</button>
</template>

API

参数

//  在此处配置参数
const {} = useScrollTo(options);

参数属性	必传	说明	类型
el	是	滚动对象的实例	Ref<Element>/HTMLElement
to	是	滚动到某个位置	number
directions	是	滚动方向	scrollTop/scrollLeft
duration	否	滚动时长，单位毫秒。默认0，没有缓动效果	number
callback	否	滚动完毕的回调，返回一个参数msg。msg等于滚动完毕，代表滚动完成；msg等于无需滚动，代表当前已处于滚动目标位置，无需滚动	(msg?:string) => void

返回值、方法

返回值、方法	说明	类型
start	开始滚动	() => void
stop	暂停滚动	() => void