ASScroll 开源项目教程

喻昊沙Egerton

于 2024-08-27 08:47:02 发布

阅读量376

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00655/article/details/141586927

版权

ASScroll 开源项目教程

asscrollAsh's Smooth Scroll 🍑项目地址:https://gitcode.com/gh_mirrors/as/asscroll

项目介绍

ASScroll 是一个 JavaScript 混合平滑滚动设置，结合了虚拟滚动的性能优势和传统滚动的可靠性。它旨在为所有平台、设备和硬件提供轻量级且一致的平滑滚动体验。ASScroll 的优势包括：

可访问性和键盘友好
无需特殊处理即可处理手动按键检测
不会在悬停于 iframe 上时停止工作
处理不触发 'wheel' 事件的硬件
在移动设备上保留原生惯性滚动的同时，DOM 和 WebGL 元素之间无延迟

项目快速启动

安装

你可以通过 npm 或 yarn 安装 ASScroll：

npm install --save @ashthornton/asscroll
# 或者
yarn add @ashthornton/asscroll

基本使用

在 HTML 中添加 asscroll-container 属性到父元素：

<body>
  <div asscroll-container>
    <div><!-- 这个元素将应用 Y 轴平移 --></div>
  </div>
</body>

在 JavaScript 中导入并初始化 ASScroll：

import ASScroll from '@ashthornton/asscroll';

const asscroll = new ASScroll();
window.addEventListener('load', () => {
  asscroll.enable();
});

应用案例和最佳实践

使用 GSAP 的 ScrollTrigger 与 ASScroll

ASScroll 可以与 GreenSock 的 ScrollTrigger 结合使用，提供更强大的滚动动画控制。以下是一个示例：

import ASScroll from '@ashthornton/asscroll';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

const asscroll = new ASScroll({
  disableRaf: true
});

window.addEventListener('load', () => {
  asscroll.enable();
  ScrollTrigger.defaults({
    scroller: asscroll.containerElement
  });
  ScrollTrigger.create({
    trigger: '#someElement',
    start: 'top top',
    end: 'bottom bottom',
    scrub: true,
    onUpdate: (self) => {
      asscroll.scrollTo(self.progress * asscroll.maxScroll);
    }
  });
});

requestAnimationFrame(onRaf);
function onRaf() {
  asscroll.update();
  requestAnimationFrame(onRaf);
}