@seamless-scroll/core v0.2.1

@seamless-scroll/core

无缝滚动的核心功能实现，提供与框架无关的滚动逻辑。

介绍

@seamless-scroll/core 提供了实现无缝滚动所需的全部核心逻辑，包括:

• 滚动状态管理
• 滚动动画控制
• 尺寸计算
• 智能克隆数量计算
• 事件处理

此包可以直接使用，也可以作为构建更高级UI组件的基础。

安装

npm install @seamless-scroll/core
# 或
pnpm add @seamless-scroll/core
# 或
yarn add @seamless-scroll/core

API 文档

createSeamlessScroll 函数

这是核心包的主要入口函数，用于创建无缝滚动实例。

参数

function createSeamlessScroll(
  container: HTMLElement,
  content: HTMLElement,
  realList: HTMLElement,
  options?: ScrollOptions,
  events?: ScrollEvents,
  onStateChange?: (state: ScrollState) => void,
): SeamlessScrollResult;

• container: 容器元素，通常是有固定尺寸且溢出隐藏的外部容器
• content: 内容元素，包含需要滚动的实际内容
• realList: 滚动内容元素，包含需要滚动的实际内容
• options: 滚动配置选项，可选
• events: 事件回调函数，可选
• onStateChange: 状态改变时的回调，可选

返回值

函数返回一个包含以下属性的对象：

• state: 只读的滚动状态对象
• methods: 控制滚动的方法集合
• destroy: 销毁滚动实例的函数

配置选项 (ScrollOptions)

状态对象 (ScrollState)

方法对象 (ScrollMethods)

事件回调 (ScrollEvents)

基本用法

也可以查看Github上的exmaples。

import { createSeamlessScroll } from "@seamless-scroll/core";

// 获取DOM元素
const container = document.querySelector(".scroll-container");
const content = document.querySelector(".scroll-content");
const realList = document.querySelector(".real-list");

// 创建无缝滚动实例
const { state, methods, destroy } = createSeamlessScroll(
  container,
  content,
  realList,
  {
    direction: "vertical",
    speed: 60,
    hoverPause: true,
  },
  {
    onScroll: (distance, direction) => {
      console.log(`滚动距离: ${distance}`);
    },
    onItemClick: (item, index) => {
      console.log(`点击了第 ${index} 项`, item);
    },
  },
);

// 控制滚动
methods.start(); // 开始滚动
methods.pause(); // 暂停滚动
methods.resume(); // 恢复滚动
methods.stop(); // 停止滚动

// 访问状态
console.log("内容尺寸:", state.contentSize);
console.log("容器尺寸:", state.containerSize);
console.log("是否需要滚动:", state.isScrollNeeded);

// 更新配置
methods.updateOptions({ speed: 100 });

// 销毁实例
destroy();

许可证

MIT