Package Exports

elastic-bounce
elastic-bounce/dist/elastic-bounce.cjs.min.js
elastic-bounce/dist/elastic-bounce.esm.min.js
elastic-bounce/dist/elastic-bounce.umd.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (elastic-bounce) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Elastic Bounce

一个轻量级的移动端弹性滚动效果库，一次性为您的应用所有页面添加平滑的弹性滚动体验。

特性

🎯 零依赖，轻量级
🚀 高性能，使用 RAF 优化
📱 专为移动端优化
🔄 支持容器内部滚动
🎨 可自定义动画效果
💪 TypeScript 支持
⚡️ 支持渐进式增强

效果

安装

# 使用 npm
npm install elastic-bounce

# 使用 yarn
yarn add elastic-bounce

# 使用 pnpm
pnpm add elastic-bounce

使用方式

在浏览器中使用

<script src="path/to/elastic-bounce.umd.js"></script>
<script>
  // 初始化弹性滚动
  ElasticBounce.init({
    container: '.scroll-container',
    maxStretch: 0.15,    // 最大拉伸比例
    resistance: 0.3,     // 拉伸阻力
    animationDuration: 300,  // 动画持续时间（毫秒）
    animationFunction: 'ease-out',  // 动画函数
    excludeSelectors: ['.no-elastic']  // 排除的元素选择器
  });
</script>

在模块系统中使用

// 导入全部功能
import ElasticBounce from 'elastic-bounce';

// 或者按需导入
import { init, destroy, enableElastic, disableElastic } from 'elastic-bounce';

// 初始化
ElasticBounce.init({
  container: '.scroll-container',
  maxStretch: 0.15
});

// 或者使用按需导入的方式
init({
  container: '.scroll-container',
  maxStretch: 0.15
});

API

配置选项

interface ElasticBounceOptions {
  container?: string;           // 容器选择器
  maxStretch?: number;         // 最大拉伸比例，默认 0.15
  resistance?: number;         // 拉伸阻力，默认 0.3
  animationDuration?: number;  // 动画持续时间（毫秒），默认 300
  animationFunction?: string;  // 动画函数，默认 'ease-out'
  excludeSelectors?: string[]; // 排除的元素选择器列表
}

方法

// 初始化弹性滚动
ElasticBounce.init(options);

// 更新所有实例
ElasticBounce.update();

// 更新配置
ElasticBounce.updateOptions(newOptions);

// 销毁所有实例
ElasticBounce.destroy();

// 启用弹性效果
ElasticBounce.enableElastic(element);

// 禁用弹性效果
ElasticBounce.disableElastic(element);

高级用法

动态内容

自动处理动态添加的内容：

// 添加新内容后无需手动更新
const container = document.querySelector('.scroll-container');
container.appendChild(newContent);

// 如果添加了新的滚动容器，可以手动更新
ElasticBounce.update();

禁用特定元素

可以通过添加选择器来排除特定元素：

ElasticBounce.init({
  container: '.scroll-container',
  excludeSelectors: [
    '.no-elastic',     // 类选择器
    '#fixed-element',  // ID 选择器
    '[data-fixed]'     // 属性选择器
  ]
});

浏览器支持

支持所有现代浏览器
自动检测特性支持并优雅降级
在不支持的浏览器中会保持原生滚动行为

许可证

MIT