ساخت یک اسکرول بار زیبا و سفارشی با CSS3

CSS3 بروز رسانی : سه شنبه 04 مهر 1402

نوارهای اسکرول کاستومایز شده روز به روز در حال محبوب‌تر شدن هستند و احتمالا شما هم با وب سایت‌هایی با نوارهای اسکرول منحصر به فرد مواجه شده‌اید که باعث ظاهر متفاوت آن‌ها شده است.

ساخت یک اسکرول بار زیبا با CSS3

روش‌های متفاوتی برای پیاده سازی یک نوار اسکرول دلخواه وجود دارد. در این مقاله در لیداوب ما از CSS3 استفاده می‌کنیم که ساده‌ترین روش است. البته پلاگین‌های jQuery هم وجود دارند که می‌توانند در این کار به ما کمک کند اما ممکن است نخواهیم جاوا اسکریپت بیشتری به وب سایت خود اضافه کنیم، پس می‌توانیم از امکانات موجود در CSS3 بهره ببریم و یک نوار اسکرول زیبا طراحی کنیم. در صورتی که شما طراح یا عکاس هستید یا فقط می‌خواهید وب سایتی با نوار اسکرول جالب داشته باشید، می‌توانید از پلاگین‌های jQuery برای این کار استفاده کنید.

پیش از آن که شروع کنیم، بهتر است نگاهی به ساختار یک نوار اسکرول معمولی داشته باشیم:

تغییر نوار اسکرول مرورگر با CSS

مطالعه بیشتر در لیداوب:

توجه داشته باشی که:

۱. کلمات مهم به صورت هایلایت نمایش داده می‌شوند

۲. کلمات برجسته برای تاکید بر یک نکته به کار می‌روند

۳. کدهای قبلی و بعدی به این صورت . . . نمایش داده می‌شوند.

توضیحات مهم

-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;
}

 تغییر نوار اسکرول مرورگر با CSS

حالا از شبه المان نوار اسکرول برای ایجاد نوار اسکرول دلخواه خود استفاده می‌کنیم. این المان عرض پیش‌فرض خود را با عرض 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;
}

. . .

پس از آن، نوار اسکرول به این شکل خواهد بود:

تغییر نوار اسکرول مرورگر با CSS

از 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;
}

 

تغییر نوار اسکرول مرورگر با CSS

نوارهای اسکرول سفارشی دیگر کاملا مرسوم هستند. می‌توانید نمونه آن را در وب سایت‌ها و وبلاگ‌های بزرگ مشاهده کنید. ده‌ها پلاگین jQuery وجود دارند که می‌توانند به کاستومایز کردن نوار اسکرول کمک کند. روش کاستومایز کردن نوار اسکرول با CSS بسیار ساده است. البته توجه کنید که سیستم عامل‌هایی مانند ویندوز، OS X و لینوکس دارای استایل مشخص برای نوار اسکرول هستند که باعث ایجاد نتایج ناخوشایند و ناسازگاری در طراحی شما می‌شود. برای رفع این مشکل باید نوار اسکرول خود را تا حد امکان ساده طراحی کنید. 

مطالعه مقالات بیشتر:

برای مطالعه مقالات آموزشی بیشتر در زمینه CSS و CSS3 می‌توانید کتابخانه آنلاین لیداوب را دنبال کنید.

برچسب ها
css css3 آموزش-css