ساخت یک اسکرول بار زیبا و سفارشی با CSS3
نوارهای اسکرول کاستومایز شده روز به روز در حال محبوبتر شدن هستند و احتمالا شما هم با وب سایتهایی با نوارهای اسکرول منحصر به فرد مواجه شدهاید که باعث ظاهر متفاوت آنها شده است.
ساخت یک اسکرول بار زیبا با CSS3
روشهای متفاوتی برای پیاده سازی یک نوار اسکرول دلخواه وجود دارد. در این مقاله در لیداوب ما از CSS3 استفاده میکنیم که سادهترین روش است. البته پلاگینهای jQuery هم وجود دارند که میتوانند در این کار به ما کمک کند اما ممکن است نخواهیم جاوا اسکریپت بیشتری به وب سایت خود اضافه کنیم، پس میتوانیم از امکانات موجود در CSS3 بهره ببریم و یک نوار اسکرول زیبا طراحی کنیم. در صورتی که شما طراح یا عکاس هستید یا فقط میخواهید وب سایتی با نوار اسکرول جالب داشته باشید، میتوانید از پلاگینهای jQuery برای این کار استفاده کنید.
پیش از آن که شروع کنیم، بهتر است نگاهی به ساختار یک نوار اسکرول معمولی داشته باشیم:
مطالعه بیشتر در لیداوب:
توجه داشته باشی که:
۱. کلمات مهم به صورت هایلایت نمایش داده میشوند
۲. کلمات برجسته برای تاکید بر یک نکته به کار میروند
۳. کدهای قبلی و بعدی به این صورت . . .
نمایش داده میشوند.
توضیحات مهم
-webkit-scrollbar
از هفت شبه المان مختلف تشکیل شده است که در کنار هم یک المان کامل UI برای نوار اسکرول ایجاد میکنند که این المانها عبارتند از:
۱. ::-webkit-scrollbar
پس زمینه نوار
۲. ::-webkit-scrollbar-button
دکمههای هدایت نوار اسکرول
۳. ::-webkit-scrollbar-track
فضای خالی زیر نوار پیشرفت
۴. ::-webkit-scrollbar-track-piece
بالاترین لایه از نوار پیشرفت که توسط شصت پوشانده نمیشود
۵. ::-webkit-scrollbar-thumb
المان قابل drag شدن اسکرول که براساس اندازه المان قابل اسکرول شدن، تغییر اندازه میدهد
۶. ::-webkit-scrollbar-corner
دکمه موجود در گوشه المان قابل اسکرول شدن که دو نوار اسکرول در آنجا با هم تلاقی میکنند
۷. ::-webkit-resizer
دسته تغییر اندازه قابل drag شدن که در گوشه بالای نوار اسکرول پدیدار میشود.
حالا که با این موارد آشنا شدید، میتوانیم شروع به طراحی اسکرول بار خود کنیم.
شروع ساخت اسکرول بار با html و CSS3
ابتدا فایلهای index.html
و style.css
را ایجاد کرده و دایرکتوری فعلی را با Sublime Text (یا Atom ،VIM ،WebStorm) باز کنید:
$ touch index.html
$ touch style.css
$ open . -a 'Sublime Text'
ایجاد سند index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Customize the Browser's Scrollbar with CSS</title>
<link type="text/css" rel="stylesheet" href="styles.css">
</head>
<body>
<div class="scrollbar" id="style-1">
<div class="force-overflow"></div>
</div>
</body>
</html>
سپس، فایل style.css
را در فایل HTML قرار میدهیم. میتوانیم کد بالا را تایپ کرده یا آن را در فایل HTML خود کپی و پیست کنیم.
ایجاد style.css
ابتدا باید خصوصیاتwidth, height, background-color
را در کلاس .scrollbar
تنظیم کرده و سپس overflow-y: scroll
را ایجاد میکنیم تا نوار اسکرول عمودی به دست آید. ما min-height: 450px
را به صورت .force-overflow
قرار دادیم تا نوار اسکرول ایجاد شود (زیرا ما از خصوصیت overflow-y
برای اسکرول در کلاس .scrollbar
استفاده کردهایم):
.scrollbar {
background-color: #F5F5F5;
float: left;
height: 300px;
margin-bottom: 25px;
margin-left: 22px;
margin-top: 40px;
width: 65px;
overflow-y: scroll;
}
.force-overflow {
min-height: 450px;
}
حالا از شبه المان نوار اسکرول برای ایجاد نوار اسکرول دلخواه خود استفاده میکنیم. این المان عرض پیشفرض خود را با عرض 6px
جایگزین کرده و سپس background-color: #F5F5F5
را اضافه میکند:
. . .
#style-1::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
}
. . .
از آنجایی که میدانیم نوار اسکرول شامل track
، button
و thumb
است، حالا میخواهیم یک ظاهر زیبا به thumb
بدهیم. از شبه المان با پیشوند webkit
استفاده کرده و scrollbar-thumb
را به صورت background- color
قرار میدهیم:
. . .
#style-1::-webkit-scrollbar-thumb {
background-color: #000000;
}
. . .
پس از آن، نوار اسکرول به این شکل خواهد بود:
از box-shadow
در scrollbar-track
استفاده میکنیم تا به آن ظاهر زیبایی داده و بین scrollbar
و scrollbar-track
کنتراست اضافه میکنیم:
. . .
#style-1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
نوارهای اسکرول سفارشی دیگر کاملا مرسوم هستند. میتوانید نمونه آن را در وب سایتها و وبلاگهای بزرگ مشاهده کنید. دهها پلاگین jQuery وجود دارند که میتوانند به کاستومایز کردن نوار اسکرول کمک کند. روش کاستومایز کردن نوار اسکرول با CSS بسیار ساده است. البته توجه کنید که سیستم عاملهایی مانند ویندوز، OS X و لینوکس دارای استایل مشخص برای نوار اسکرول هستند که باعث ایجاد نتایج ناخوشایند و ناسازگاری در طراحی شما میشود. برای رفع این مشکل باید نوار اسکرول خود را تا حد امکان ساده طراحی کنید.
مطالعه مقالات بیشتر:
برای مطالعه مقالات آموزشی بیشتر در زمینه CSS و CSS3 میتوانید کتابخانه آنلاین لیداوب را دنبال کنید.
متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند
دیدگاه ها 0