در این مقاله یاد خواهید گرفت که چطور با نوشتن سه خط کد CSS می توانید اسکرول بار وب سایت خود را مانند Mac OS کنید.

اگرچه اسکرول بار دارای محدوده کمی در مرورگر وب است،  اما به نظر من آنقدر کوچک نیست و نمی توان آن را نادیده گرفت.
اگر فرانت اند کار خوب هستید و به همه جزئیات اهمیت می دهید، این آموزش کوتاه برای شما مفید خواهد بود.

شروع کنید

برای سفارشی سازی (customize) اسکرول بار وبسایت خود، کافیه چند خط کد را به فایل css اضافه کنید. برای سفارشی سازی حتی نیاز به جاوا اسکریپت هم ندارید! 
کد زیر، کد CSS را برای سفارشی کردن اسکرول بار مرورگر وب نشان می دهد.

/* Customize website's scrollbar like Mac OS
.
Not supports in Firefox and IE */

/* total width */
body::-webkit-scrollbar {
    background-color: #fff;
    width: 16px;
}

/* background of the scrollbar except button or resizer */
body::-webkit-scrollbar-track {
    background-color: #fff;
}

/* scrollbar itself */
body::-webkit-scrollbar-thumb {
    background-color: #babac0;
    border-radius: 16px;
    border: 4px solid #fff;
}

توجه

سفارشی کردن اسکرول بار مرورگر وب، روش استانداردی برای استایل دهی نیست، بنابراین برای استفاده از pseudo-element های بالا باید از پیشوند، --webkit-- استفاده کنید.
فقط مرورگرهای Webkit (به عنوان مثال Chrome ، Safari) از این ویژگی ها پشتیبانی می کنند.
مرورگرهای دیگری مانند Firefox یا IE از این روش پشتیبانی نمی کنند.

Pseudo-Element ها

برای سفارشی کردن اسکرول بار مرورگر وب می توانید از 7 pseudo-element مختلف استفاده کنید.
کد زیر را مشاهده کنید:

::-webkit-scrollbar				{/* 1. entire scrollbar scope */}
::-webkit-scrollbar-button		{/* 2. directional buttons at the top and bottom of the scrollbar */}
::-webkit-scrollbar-track		{/* 3. space below the scrollbar */}
::-webkit-scrollbar-track-piece	{/* 4. not covered area by the scrollbar-thumb */}
::-webkit-scrollbar-thumb		{/* 5. draggable scrollbar itself */}
::-webkit-resizer				{/* 6. the draggable resizing handle that appears at the bottom corner of some elements */}
::-webkit-scrollbar-corner		{/* 7. the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet */}

1. محدوده کل اسکرول بار

2. دکمه های جهت دار در بالا و پایین اسکرول بار

3. مسیر اسکرول بار (فضای زیر اسکرول بار)

4. توسط scrollbar-thumb پوشانده نشده است

5. خود اسکرول بار

6. دسته تغییر اندازه قابل جمع شدن که در گوشه پایین برخی از عناصر ظاهر می شود

7. گوشه پایین نوار پیمایش ، جایی که هر دو نوار پیمایش افقی و عمودی بهم می پیوندند

من در این آموزش کوتاه از این خاصیت ها استفاده کردم:

::-webkit-scrollbar
::-webkit-scrollbar-track
::-webkit-scrollbar-thumb

برای کسب اطلاعات بیشتر میتوانید به این لینک مراجعه کنید.