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

نحوه سفارشی کردن نوار اسکرول بار سایت دیجی کالا به دو روش پلاگین و CSS

زمانی که وارد هر سایتی بشید، اگر ارتفاع محتوا اون صفحه از سایت، بیشتر از ارتفاع دستگاه (موبایل، تبلت، دسکتاپ) باشه اون پنجره مرورگر یک اسکرولی در راستای عمود به خودش میگیره، زمانی که در راستای عمود پیمایش کنیم می تونیم نوار اسکرول بار پیش فرض مرورگر رو ببینیم.

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

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

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

یکی از مواردی که باعث میشه سایت جذاب تر بشه ایجاد اسکرول بار سفارشی در سایت هستش که حس عالی ای رو به کاربر موقع اسکرول کردن سایتتون میده پس چه بهتره اسکرول بار سایتتون رو سفارشی سازی کنید به اون رنگ و استایلی که در نظر دارید.

حالا در این بخش از مجموعه آموزش های رایگان و پروژه محور HTML | CSS قراره به صورت کامل خدمتتون سفارشی سازی کردن نوار اسکرول بار سایت دیجی کالا رو به دو روش استفاده از پلاگین و بدون پلاگین فقط با CSS خالص آموزش بدم تا یک اسکرول بار جذابی مشابه سایت دیجی کالا حتی حرفه ای تر برای سایتتون ایجاد کنید.

در این آموزش رایگان ابتدا پلاگین NiceScroll.js رو مورد بررسی قرار می دهیم و در آخر با استفاده از یکسری سلکتور های CSS به اسکرول بار پیش فرض مرورگر استایل می دهیم که تا حد بالایی به طرحی که در نظر داریم در بیاید.

نکته ای که وجود داره اینکه که زمانی که از سلکتور های مربوط به اسکرول بار در CSS استفاده می کنیم مرورگر فایرفاکس از این سلکتور ها پشتیبانی نمیکنه، زمانی که استفاده بشه سایت در مرورگر فایرفاکس اسکرول بارش همون اسکرول بار پیش فرض مرورگر میشه.

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

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