SuperAPI AI 工具集

scroll-behavior-design

前端与建站

查看项目

更新于 10-15 21:12

技能介绍

用途:面向网页滚动交互设计,提供滚动吸附、滚动联动动画、粘性元素等实现模式,并指出常见反模式。

主要能力:滚动吸附通过 scroll-snap-type 与 scroll-snap-align 实现,适用于整页分区、图片画廊、卡片轮播;滚动联动动画建议用 IntersectionObserver 而非 scroll 事件监听,元素进入视口时做轻微 fade 加 translateY,避免逐像素动画影响性能;粘性元素用 position: sticky; top: 0; 实现,可用于长页面的粘性页头、对比页面的粘性侧栏、长表单或产品页的粘性 CTA。

反模式:引发晕动症的视差、覆盖原生滚动速度的滚动劫持、每次滚动都触发的动画、无位置记忆的无限滚动。

限制:资料未提供具体安装命令、平台支持范围、收费方式或效果数据,暂未提供。