Tw-fade：纯 CSS 驱动的边缘遮罩滚动效果

Tw-fade：纯 CSS 驱动的边缘遮罩滚动效果
Tw-fade: pure CSS scroll-driven edge masking

滚动感知：仅在有更多内容可滚动时才会显示渐隐效果，并在到达边缘时平滑消失。缓动渐变：缓动的透明度渐变使内容自然地融入背景，而非在边缘处生硬截断。 fade-y, xy, t, x, fade-r, range-2xl, size-lg：这些组件化的轴向、尺寸、范围及清晰区域工具可直接应用于滚动容器。

开发者 petekp 发布了 **tw-fade**，这是一个利用 CSS 遮罩和现代 CSS 滚动动画 API 为可滚动元素创建边缘渐隐效果的新插件。该项目旨在取代传统的基于 JavaScript 的解决方案，以简化滚动视图中渐变遮罩的实现。此发布在 Hacker News 上引起了褒贬不一的反馈。尽管其概念受到称赞，但用户反映存在严重的性能问题，包括 Chrome 浏览器上的掉帧和滚动卡顿。此外，一些用户指出该插件目前尚不支持 Firefox（预计很快会支持），并提到了演示网站在键盘导航（方向键/Page Down）方面存在问题。开发者目前正在积极征求反馈以改进插件，该插件现已在 GitHub 和 npm 上发布。

Scroll aware

Fades appear only when there is more content to scroll, then ease away again at either edge.

Eased gradients

Eased alpha ramps dissolve content into the surface instead of ending on a clipped line.

Composable

Axis, size, range, and clear-zone utilities compose directly on the scroll container.