اگر پروژه را با npx farsiui@latest init راه‌اندازی کرده باشید، scroll-fade از قبل در پروژه شما وجود دارد. این Utility همراه پکیج farsiui ارائه می‌شود و CLI آن را در فایل CSS سراسری پروژه وارد می‌کند.
در غیر این صورت، پکیج farsiui را نصب کنید:
سپس Utilityهای مشترک را در فایل CSS سراسری پروژه وارد کنید:
@import "tailwindcss";
@import "farsiui/tailwind.css";کلاس scroll-fade یا scroll-fade-y را روی همان عنصری قرار دهید که قابلیت اسکرول عمودی دارد:
<div className="scroll-fade overflow-y-auto">{/* ... */}</div>افکت محو شدن با موقعیت اسکرول هماهنگ است:
این افکت با mask-image اعمال می‌شود؛ بنابراین خود محتوا را محو می‌کند و روی آن یک رنگ قرار نمی‌دهد. ماسک از یک طیف شفاف تا مشکی استفاده می‌کند و با هر پس‌زمینه‌ای سازگار است.
اگر ناحیهٔ اسکرول داخل یک Card قرار دارد، پس‌زمینه و Border را روی Wrapper قرار دهید و scroll-fade را روی اسکرولر داخلی بگذارید تا افکت فقط محتوای داخلی را محو کند.
کامپوننت‌های ScrollArea و MessageScroller نیز می‌توانند از scroll-fade روی Viewport قابل اسکرول خود استفاده کنند.
اگر محتوا از اندازهٔ کانتینر بیشتر نباشد، هیچ افکت محوی نمایش داده نمی‌شود. بنابراین می‌توانید scroll-fade را روی هر لیستی قرار دهید و نیازی نیست ابتدا بررسی کنید که قابل اسکرول است یا نه.
برای کانتینرهایی که به‌صورت افقی اسکرول می‌شوند، یعنی دارای overflow-x-auto هستند، از scroll-fade-x استفاده کنید.
<div className="flex scroll-fade-x overflow-x-auto">{/* ... */}</div>محو شدن افقی با جهت متن هماهنگ است. در Layoutهای RTL، لبهٔ واضح و محو به‌صورت خودکار با جهت خواندن جابه‌جا می‌شوند و نیازی به کلاس اضافی نیست.
کلاس‌های scroll-fade-<number> و scroll-fade-none نیز برای هر دو محور به یک شکل کار می‌کنند.
وقتی فقط می‌خواهید یک لبه موقعیت اسکرول را دنبال کند، از Utilityهای مخصوص لبه استفاده کنید.
<div className="scroll-fade-b overflow-y-auto">{/* ... */}</div>Utilityهای لبه نیز با موقعیت اسکرول هماهنگ هستند. لبهٔ شروع پس از فاصله گرفتن از ابتدای محتوا محو می‌شود و لبهٔ پایان هنگام نزدیک شدن به انتهای محتوا از حالت محو خارج می‌شود.
برای لبه‌های فیزیکی از scroll-fade-t، scroll-fade-b، scroll-fade-l و scroll-fade-r استفاده کنید.
برای لبه‌های منطقی در محور Inline که در RTL نیز به‌صورت خودکار معکوس می‌شوند، از scroll-fade-s و scroll-fade-e استفاده کنید.
عمق محو شدن به‌صورت پیش‌فرض 12% از اندازهٔ کانتینر است و حداکثر تا 40px محدود می‌شود تا در اسکرولرهای بلند نیز ظریف باقی بماند.
با scroll-fade-<number> می‌توانید اندازهٔ ثابتی را بر اساس مقیاس Spacing تعیین کنید؛ مشابه نحوهٔ کار scroll-mt-<number>.
<div className="scroll-fade overflow-y-auto scroll-fade-24">{/* ... */}</div>برای مقدارهای دلخواه می‌توانید از مقدار Arbitrary به‌صورت طول یا درصد استفاده کنید:
<div className="scroll-fade overflow-y-auto scroll-fade-[15%]">{/* ... */}</div>برای تعیین اندازهٔ متفاوت در لبه‌های مختلف، از Modifierهای scroll-fade-t-<number>، scroll-fade-b-<number>، scroll-fade-s-<number> و scroll-fade-e-<number> استفاده کنید.
این Modifierها مقدار scroll-fade-<number> را برای لبهٔ موردنظر Override می‌کنند و مقدار Arbitrary نیز می‌پذیرند:
<div className="scroll-fade overflow-y-auto scroll-fade-b-8 scroll-fade-t-2">
{/* ... */}
</div>برای اسکرولرهای افقی از Modifierهای منطقی s و e استفاده کنید تا اندازه‌ها در RTL نیز به‌درستی معکوس شوند.
افکت محو شدن به‌صورت تدریجی ظاهر و ناپدید می‌شود و ناگهان تغییر نمی‌کند. این فاصله توسط متغیر --scroll-fade-reveal کنترل می‌شود که مقدار پیش‌فرض آن 96px است و مستقل از عمق محو شدن عمل می‌کند.
برای نمایش سریع‌تر، مقدار آن را کاهش دهید و برای انتقال تدریجی‌تر، مقدار بیشتری قرار دهید:
<div className="scroll-fade overflow-y-auto [--scroll-fade-reveal:64px]">
{/* ... */}
</div>برای حذف افکت از scroll-fade-none استفاده کنید. این کلاس مستقل از ترتیب کلاس‌ها عمل می‌کند و برای حالت‌های Responsive یا Stateful مناسب است:
<div className="scroll-fade overflow-y-auto md:scroll-fade-none">
{/* ... */}
</div>رفتار هوشمند اسکرول با استفاده از CSS Scroll-Driven Animations پیاده‌سازی شده و به JavaScript یا Scroll Listener نیاز ندارد.
در مرورگرهایی که از Scroll-Driven Animations پشتیبانی نمی‌کنند، scroll-fade به یک محوشدن ثابت در هر دو لبه تبدیل می‌شود و Utilityهای لبه نیز به محوشدن ثابت در لبهٔ انتخاب‌شده برمی‌گردند.
از آنجا که Mask مستقیماً روی کانتینر اسکرول اعمال می‌شود، Scrollbar قابل مشاهده نیز در لبه‌ها همراه محتوا محو می‌شود. اگر می‌خواهید Scrollbar را کاملاً مخفی کنید، scroll-fade را با no-scrollbar که در همین پکیج ارائه شده ترکیب کنید.
scroll-fade-x جهت خواندن را دنبال می‌کند. در حالت اولیه، لبهٔ شروع واضح و لبهٔ پایان محو است. در Layoutهای RTL، این حالت به‌صورت خودکار معکوس می‌شود؛ یعنی لبهٔ راست واضح و لبهٔ چپ محو خواهد بود.