🎨 آموزش کامل ساخت و ویرایش Scroll Bar در HTML + CSS
ساخت و ویرایش Scroll Bar: نوار اسکرول در واقع با CSS کنترل میشود؛ در HTML فقط محتوا قرار میگیرد.
برای تغییر ظاهر Scrollbar باید از WebKit pseudo-elementها استفاده کنید:
::-webkit-scrollbar
::-webkit-scrollbar-track
::-webkit-scrollbar-thumb
این دستورات در مرورگرهای مانند Chrome، Edge، Safari، Opera پشتیبانی میشود.
✔️ مثال پایه: تغییر رنگ و اندازه نوار اسکرول
در این مثال یک باکس داریم که اسکرول دارد و ظاهر اسکرول را تغییر میدهیم.
HTML:
<div class="box">
<p>
متن نمونه برای تست اسکرول. متن نمونه برای تست اسکرول.
متن نمونه برای تست اسکرول. متن نمونه برای تست اسکرول.
</p>
</div>
CSS:
.box {
width: 300px;
height: 150px;
overflow-y: scroll;
padding: 10px;
border: 1px solid #ccc;
}
/* اسکرولبار کلی */
.box::-webkit-scrollbar {
width: 10px; /* ضخامت */
}
/* پسزمینه اسکرول */
.box::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
/* خود اسکرول (Thumb) */
.box::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
/* حالت هاور اسکرول */
.box::-webkit-scrollbar-thumb:hover {
background: #555;
}
✔️ اسکرولبار باریک حرفهای
اگر میخواهید اسکرول خیلی ظریف و مینیمال باشد:
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-thumb {
background: #a8a8a8;
border-radius: 20px;
}
✔️ Scroll با رنگهای gradient (گرادینت)
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #ff6a00, #ee0979);
border-radius: 10px;
}
✔️ شیشهای (Glass / Frosted)
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(4px);
border-radius: 10px;
}
✔️ Scroll افقی
اگر میخواهید اسکرول فقط افقی باشد:
.container {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
✔️ حذف کامل Scroll Bar (اسکرول مخفی)
اگر میخواهید اسکرول موجود باشد ولی دیده نشود:
.hidden-scroll {
overflow-y: scroll;
}
.hidden-scroll::-webkit-scrollbar {
display: none;
}
⚠️ توجه: این روش در Firefox کار نمیکند؛ راهحل فایرفاکس نسخه دیگری دارد:
.hidden-scroll {
scrollbar-width: none; /* Firefox */
}
✔️ اسکرول مخصوص Firefox
فایرفاکس از WebKit پشتیبانی نمیکند، اما از این دو دستور استفاده میکند:
/* ضخامت */
* {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1; /* thumb track */
}
✔️ اسکرول سفارشی فقط برای یک div
این روش باعث میشود اسکرول کل صفحه تغییر نکند:
.my-scroll::-webkit-scrollbar { width: 12px; }
.my-scroll::-webkit-scrollbar-track { background: #eee; }
.my-scroll::-webkit-scrollbar-thumb { background: #555; }
مزایای استفاده از Scroll Bar در HTML
- افزایش دسترسی به محتوا: اجازه میدهد محتوای طولانی یا گسترده بدون اشغال فضای زیاد نمایش داده شود.
- ظاهر مرتب و سازمانیافته: صفحات شلوغ را مرتب میکند و باعث میشود طراحی تمیزتری داشته باشیم.
- کنترل اندازه نمایش محتوا: میتوان ارتفاع و عرض محتوای قابل اسکرول را با CSS تنظیم کرد.
- تجربه کاربری بهتر: کاربران میتوانند محتوای مورد نظر خود را سریع پیدا کنند و مرور کنند.
معایب استفاده از Scroll Bar در HTML
- مشکل در موبایل یا صفحات کوچک: اسکرولهای زیاد در صفحه نمایش کوچک ممکن است تجربه کاربری را کاهش دهد.
- طراحی نامتوازن: اگر زیاد استفاده شود، ظاهر سایت شلوغ و آشفته میشود.
- کند شدن عملکرد سایت: محتوای بسیار طولانی در یک المان اسکرولی میتواند باعث کاهش سرعت بارگذاری یا اجرای جاوااسکریپت شود.
- دسترسی کمتر برای کاربران خاص: افراد با مشکلات بینایی یا کسانی که از صفحهخوان استفاده میکنند، ممکن است در استفاده از اسکرول بار مشکل داشته باشند.
