سفارشی کردن اسکرول بار در سایت وردپرسی

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

این اسکرول بار در تمامی سایت ها به شکل یکسان نمایش داده می‌شود و کمتر وب سایتی این بخش را تغییر می‌دهد . ازجمله سایت های ایرانی که قسمت اسکرول بار را در سایت خود سفارشی کرده است و شما هنگام ورود به این وب سایت ، نوار اسکرول سمت راست را متفاوت مشاهده می‌کنید ، دیجی کالا است .

کمتر از 5% وب سایت ها سفارشی کردن اسکرول بار را انجام می‌دهند و بقیه به همین شکل پیشفرض از آن استفاده می‌کنند اما شما نیز می‌توانید بسادگی سفارشی سازی اسکرول بار را انجام دهید . این سفارشی سازی ربطی به سایت های وردپرسی نیز ندارد چراکه تنها با کدهای css انجام خواهد شد .

اما اگر سایت وردپرسی دارید و با کدنویسی css نیز آشنایی ندارید می‌توانید از افزونه های کمکی وردپرس نیز استفاده کنید .

سفارشی کردن اسکرول بار توسط css

اگر شما در حال طراحی یک قالب با html و css هستید میتوانید با چندخط کد ، از همان بخش های فرانت‌اند ، سفارشی کردن اسکرول بار را انجام دهید . اگرهم سایت وردپرسی دارید ، میتوانید فایل style.css قالب خود را باز کرده و از کدهای ارائه شده در زیر استفاده کنید . برای اینکه مشکلی داخل استایل های کلی سایت شما ایجاد نشود ، بهتر است در انتهای همه کدهای Css قالب ، قطعه کد زیر را قرار دهید :

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar {
  width: 10px;
}
 
::-webkit-scrollbar-track {
  background: #ffb400; 
    border:1px solid #ccc;
}
 
::-webkit-scrollbar-thumb {
  background: #cc00ff; 
    border:1px solid #eee;
    height:100px;
    border-radius:5px;
}
 
::-webkit-scrollbar-thumb:hover {
  background: blue; 
}

اما این قطعه کد چگونه است ؟ شما در داخل اسکرول یک بخش کلی دارید که از بالا تاپایین صفحه شما قرار گرفته و اسم آن اسکرول بار است یعنی کدی که مربوط به بخش scrollbar است و ما در این بخش عرض کلی این بخش را 10px درنظر گرفتیم که عرض آن کمتر شود .

قسمت بعدی scrollbar-track است که مربوط به بخشی می‌شود که اسکرول بار تامب ( scrollbar track thumb ) داخل آن حرکت می‌کند ! در حقیقت همان بخش طوسی کم رنگ که درون اسکرول بار است ( شاید اینگونه تصور کنید که اسکرول بار ترک همان اسکرول بار است ، اما باید گفت اسکرول بار یک بخش و هولدر کلی است که در داخل آن اسکرول بار ترک قرار گرفته است اما هردوی اینها از لحاظ ارتفاعی هم اندازه هستند ) . میتوانید رنگ طوسی کمرنگ پیشفرض را نیز با دستور background تغییر دهید .

قسمت scrollbar thumb نیز که در بالا توضیح داده شد ، مربوط به همان غلتکی است که هنگام اسکرول در صفحه ، داخل اسکرول بار ترک حرکت می‌کند .

قسمت scrollbar thumb hover نیز برای استایل زمانی است که شما با موس روی غلتک یا همان scrollbar thumb قرار خواهید گرفت که می‌توانید رنگ پس زمینه در زمان hover شدن را تعیین کنید .

به همین سادگی میتوانید سفارشی کردن اسکرول بار در سایت را انجام دهید . اکنون می‌توانید طبق سلیقه خودتان ، استایل هریک از قسمت های مربوط به اسکرول بار در سایت را تغییر دهید . فاکتور هایی همچون عرض کلی اسکرول بار ، رنگ پس زمینه بخش های داخلی ، حاشیه ، border radius و …

پس مشاهده کردید که با چندخط کد می‌توانید خودتان بسادگی سفارشی کردن اسکرول بار در قالب سایت خودتان را انجام دهید . اما اگر سایت وردپرسی دارید و کار کردن با کدهای css  وهمچنین فایل style.css را ندارید ، باید دست به دامان افزونه‌های وردپرس شوید .

استفاده از افزونه  Advanced scrollbar

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

پس از نصب این افزونه ، باید به سراغ قسمت تنظیمات در پیشخوان بروید . اکنون یک گزینه بنام ” Advanced scrollbar setting ” اضافه شده است که می‌توانید تنظیمات شخصی سازی اسکرول بار را در سایت انجام دهید .

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

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

تغییر اسکرول بار یک مورد سلیقه‌ای است و خودتان باید تصمیم بگیرید که قصد دارید تا اسکرول بار سایت شما چگونه نمایش داده شود . اسکرول بار دیجی کالا یکی از نمونه های جذاب است که می‌توانید از استایل آن نیز کمک بگیرید .

توجه داشته باشید که استفاده از رنگ هایی که بسیار در دید هستند ( رنگ های تابلو ) کار درستی نخواهد بود چرا که وجه ظاهری سایت را بخوبی نمایش نداده و کلیت طرح را به هم خواهد ریخت ، لذا لازم است متناسب با رنگ بندی و طرح کلی وب سایت خودتان ، رنگ اسکرول بار را نیز تعیین کنید .

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

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا