yy-scroll

滚动工具，支持平滑滚动、滚动到底部等功能。

安装

npm install yy-scroll

使用

基础用法

import { 
  scrollToBottom,
  scrollToTop,
  scrollToElement,
  scrollToPosition,
  isScrolledToBottom,
  scrollWindowToTop
} from 'yy-scroll';

// 滚动容器到底部
scrollToBottom('#chat-container', {
  behavior: 'smooth',
  offset: 30 // 底部偏移30px
});

// 滚动容器到顶部
scrollToTop('#chat-container');

// 滚动到指定元素
scrollToElement('#error-field', {
  behavior: 'smooth',
  block: 'center'
});

// 滚动到指定位置
scrollToPosition('#chat-container', 500);

// 检查是否滚动到底部
if (isScrolledToBottom('#chat-container')) {
  console.log('已滚动到底部');
}

// 滚动窗口到顶部
scrollWindowToTop({ behavior: 'smooth' });

在 Vue 中使用

<script setup>
import { nextTick } from 'vue';
import { scrollToBottom } from 'yy-scroll';

const chatContainer = ref(null);

function handleNewMessage() {
  nextTick(() => {
    scrollToBottom(chatContainer.value, {
      behavior: 'smooth',
      offset: 30
    });
  });
}
</script>

<template>
  <div ref="chatContainer" class="chat-container">
    <!-- 聊天内容 -->
  </div>
</template>

API

scrollToBottom(container, options)

滚动容器到底部。

参数：

• container (HTMLElement|string) - 容器元素或选择器
• options (object) - 滚动选项
  • behavior (string) - 滚动行为，'smooth' 或 'auto'，默认 'smooth'
  • offset (number) - 底部偏移量（像素），默认 0

scrollToTop(container, options)

滚动容器到顶部。

参数：

• container (HTMLElement|string) - 容器元素或选择器
• options (object) - 滚动选项
  • behavior (string) - 滚动行为，'smooth' 或 'auto'，默认 'smooth'

scrollToElement(element, options)

滚动到元素。

参数：

• element (HTMLElement|string) - 元素或选择器
• options (object) - 滚动选项
  • behavior (string) - 滚动行为，'smooth' 或 'auto'，默认 'smooth'
  • block (string) - 垂直对齐方式，'start'|'center'|'end'|'nearest'，默认 'center'
  • inline (string) - 水平对齐方式，'start'|'center'|'end'|'nearest'，默认 'nearest'

scrollToPosition(container, position, options)

滚动到指定位置。

参数：

• container (HTMLElement|string) - 容器元素或选择器
• position (number) - 滚动位置（像素）
• options (object) - 滚动选项
  • behavior (string) - 滚动行为，'smooth' 或 'auto'，默认 'smooth'

isScrolledToBottom(container, threshold)

检查是否滚动到底部。

参数：

• container (HTMLElement|string) - 容器元素或选择器
• threshold (number) - 阈值（像素），默认 50

返回值：

• boolean - 是否滚动到底部

isScrolledToTop(container, threshold)

检查是否滚动到顶部。

参数：

• container (HTMLElement|string) - 容器元素或选择器
• threshold (number) - 阈值（像素），默认 50

返回值：

• boolean - 是否滚动到顶部

scrollWindowToTop(options)

滚动窗口到顶部。

参数：

• options (object) - 滚动选项
  • behavior (string) - 滚动行为，'smooth' 或 'auto'，默认 'smooth'

特性

• ✅ 平滑滚动支持
• ✅ 支持元素和选择器
• ✅ 滚动状态检测
• ✅ 零依赖
• ✅ TypeScript 支持