‏ساخت اسکرول‌بار سفارشی بدون درد در ۲۰۲۶

نویسنده تو این مقاله نشون می‌ده چطور تو سال ۲۰۲۶ می‌شه یه اسکرول‌بار کاملا سفارشی ساخت بدون اینکه برای محاسبه اندازه و موقعیت بار از ResizeObserver یا رویداد scroll استفاده کنی. روش قدیمی هر بار که اسکرول می‌شه یا سایز کانتینر عوض می‌شه، مقادیر offsetHeight و scrollHeight رو با جاوااسکریپت می‌خونه که هم چندین بار در ثانیه اجرا می‌شه هم می‌تونه باعث reflow بشه.

برای جاگذاری خود بارها روی کانتینر، از anchor positioning استفاده می‌شه؛ یعنی بارها به یه المان anchor وصل می‌شن و همیشه رو کانتینر ثابت می‌مونن، بدون اینکه با اسکرول جابه‌جا بشن. بعد با scroll-timeline موقعیت اسکرول به یه انیمیشن CSS وصل می‌شه و با animation-range و یه container query از نوع size، اندازه بار هم متناسب با نسبت offsetHeight به scrollHeight تنظیم می‌شه؛ یعنی همه این حساب‌وکتاب‌ها بدون خط جاوااسکریپت انجام می‌شه:

.bar {
  animation-name: top, bottom, bar;
  animation-timing-function: linear;
  animation-timeline: --scrollbar;
}

تنها جایی که هنوز جاوااسکریپت لازمه، درگ کردن بار با ماوس یا لمسه؛ چون بقیه تعامل‌ها مثل اسکرول با کیبورد، ماوس یا تاچ‌پد به‌طور طبیعی روی خود کانتینر اسکرول‌شونده کار می‌کنن. نویسنده می‌گه این روش فعلا رو Chrome، Safari و نسخه Nightly فایرفاکس جواب می‌ده و چون کار اسکرول واقعی مرورگر رو دست‌نخورده می‌ذاره، از نظر دسترس‌پذیری هم مشکل خاصی نداره.

به گفته نویسنده، اسکرول‌بار سفارشی یه نیاز واقعیه؛ از یکدست کردن ظاهر بین مرورگرها و سیستم‌عامل‌های مختلف گرفته تا کم کردن شلوغی بصری وقتی چند تا کانتینر قابل‌اسکرول تو صفحه هست. برای همینه که سایت‌هایی مثل فیسبوک، دیسکورد، اسپاتیفای و حتی ادیتورهایی مثل VS Code for the Web و CodePen اسکرول‌بار سفارشی خودشونو دارن.

نکات کلیدی:

• روش جدید بدون ResizeObserver یا رویداد scroll، فقط با scroll-driven animations، anchor positioning و container queries کار می‌کنه
• تنها بخشی که هنوز جاوااسکریپت لازم داره، درگ کردن بار با ماوس یا لمسه‌ست
• این تکنیک فعلا روی Chrome، Safari و فایرفاکس Nightly پشتیبانی می‌شه
• سایت‌هایی مثل فیسبوک، دیسکورد، اسپاتیفای، VS Code for the Web و CodePen از اسکرول‌بار سفارشی استفاده می‌کنن