سفارشی سازی اسکرول بار در CSS و JS (به روز رسانی 2024)

در سال 2018، من یک مقاله Medium در مورد سفارشی سازی اسکرول بار نوشتم که اکنون قدیمی شده است.

در سال 2020، من دوباره موضوع را بررسی کردم و نسخه به روز شده آن را در وبلاگ خود منتشر کردم. با این حال، آن نیز منسوخ شده است 😅

بنابراین، تصمیم گرفتم وضعیت فعلی سفارشی‌سازی اسکرول‌بار را بررسی کنم، بر روی پشتیبانی CSS و کتابخانه‌های JS موجود تمرکز کنم و معیارهای انتخاب خود را گسترش دهم.


یک روز، طراحان ماکت‌های خیره‌کننده را به شما ارائه می‌کنند 🌠 دارای اسکرول‌های سفارشی مانند macOS که شبیه تصویر صفحه بالا هستند.

اما شاید در سمت چپ، کوچک‌تر یا بزرگ‌تر، با تورفتگی‌های متفاوت بسته به اینکه گوشی موبایل 📱، دسکتاپ 🖥️، یا صفحه تلویزیون 📺 باشد. درخواست بیشتر؟ واقعیت این است که … سفارشی سازی اسکرول بار از اواخر دهه 90 پیشرفت چندانی نکرده است. وقتی اولین نسخه مقاله را در سال 2018 نوشتم، هنوز یک PITA بود. آیا از آن زمان وضعیت بهتر شده است؟

پشتیبانی سفارشی سازی CSS

اول و مهمتر از همه، پیش نویس ماژول استایلینگ CSS Scrollbars Level 1 2 ویژگی اضافه کرد. scrollbar-color و scrollbar-width

.container {
  scrollbar-color: rebeccapurple green; /** auto | dark | light | ; */
  scrollbar-width: 5px; /** auto | thin | none | ; */
}

JSFiddle برای تست آن در مرورگر خود: https://jsfiddle.net/beraliv/4yd7bg2r/14/ 🏝️

.container {
 ...

Source link