آموزش رایگان ساخت اسکرول بار سفارشی سایت دیجی کالا با Html | Css | Jquery | NiceScroll

آموزش رایگان و پروژه محور ساخت اسکرول بار سفارشی

اسکرول بار سفارشی یکی از جزئیات ظریفیه که می‌تونه ظاهر سایت رو از حالت پیش‌فرض مرورگر خارج کنه و حس حرفه‌ای‌تری بده. در این مینی پروژه قراره با HTML، CSS، jQuery و پلاگین NiceScroll یه اسکرول بار سفارشی مشابه دیجی کالا بسازیم.

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

روش دوم با پلاگین NiceScroll پیاده‌سازی شده. این پلاگین به jQuery متصله و کنترل بیشتری روی ظاهر اسکرول می‌ده. تنظیمات مختلفی مثل رنگ دستگیره، ضخامت، گردی گوشه‌ها و موقعیت اسکرول رو می‌شه باهاش مشخص کرد.

توی تنظیمات NiceScroll این پروژه، اسکرول در سمت راست قرار گرفته و ضخامتش ۸ پیکسل تنظیم شده. رنگ دستگیره قرمز و رنگ پس‌زمینه خاکستریه. گوشه‌های دستگیره هم حالت تیز دارن و حالت مخفی‌شونده خودکار غیرفعال شده تا اسکرول همیشه دیده بشه.

یه نکته مهم درباره NiceScroll اینه که z-index بالایی براش تنظیم شده. این کار باعث می‌شه اسکرول سفارشی روی همه عناصر صفحه نمایش داده بشه و زیر هیچ بخشی پنهان نمونه.

برای این پروژه از همون ساختار هدر استفاده شده تا اسکرول سفارشی توی یه صفحه واقعی تست بشه. صفحه ارتفاع بلندی داره تا اسکرول فعال باشه و بشه تفاوتش رو با حالت پیش‌فرض دید.

نکته کاربردی این پروژه، آشنایی با دو رویکرد متفاوت برای شخصی‌سازی اسکروله. روش CSS ساده‌تره ولی محدودیت داره. روش NiceScroll امکانات بیشتری می‌ده ولی نیاز به لود پلاگین داره.

در نهایت می‌تونی اسکرول بار سفارشی رو در پروژه‌های شخصی خودت استفاده کنی. سورس کامل پروژه به صورت رایگان در دسترسه تا کدها رو بررسی کنی.

اگه می‌خوای این جزئیات رو در قالب یه پروژه فروشگاهی کامل پیاده کنی، آموزش طراحی سایت دیجی کالا از صفر تا صد می‌تونه انتخاب مناسبی باشه.