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

• افزونه وردپرس مقالات آموزشی
• بروز‌رسانی‌شده در ۰۹ مرداد ۱۳۹۸

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

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

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

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

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

روش اول: ایجاد یک اسکرول سفارشی با استفاده از افزونه

این روش از همه‌‌ی روش‌‌ها ساده‌‌تر هست اما متاسفانه از مرورگرهای تلفن همراه پشتیبانی نمی‌‌کنه. شما می‌‌تونید خیلی راحت افزونه‌‌ی Advanced scrollbar را نصب و فعال کنید. بعد از فعال کردن پلاگین به قسمت Settings » Custom Color Scrollbar Settings تا تنظیمات افزونه را انجام دهید.

در این قسمت شما می‌‌توانید رنگ اسکرول و رنگ پس‌‌زمینه ردیاب اسکرول را به دلخواه خودتان تغییر دهید. همچنین می‌‌تونید سرعت پیمایش چرخ موس را تنظیم کنید.از این قسمت شما می‌‌تونید انتخاب کنید که اسکرول همی‌شود نمایش داده شود یا اینکه بطور خودکار پنهان شود.

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

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

روش دوم:استفاده از CSS بدون نیاز به افزونه

استفاده از این روش خیلی سریع‌‌تر از jQuery هست، با این حال فقط درمرورگرهای دسکتاپ مانند گوگل، سافاری و اپرا کار می‌‌کنه و روی مرورگرهای موبایل یا فایرفاکس اثری ندارد!

برای اعمال این تغییرات باید از کد زیر استفاده کنید:

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

با استفاده از ویژگی‌‌های CSS شما آزاد هستید که هر تغییری که خواستید را اعمال کنید.

بعد از اعمال تغییرات حتما تغییرات را ذخیره کنید و سپس این تغییرات را در یک مرورگر پشتیبانی شده مشاهده کنید.

امیدواریم که این مقاله به شما برای ایجاد کردن اسکرول سفارشی کمک کرده باشد. 🙂

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

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را برای شما فراهم کنیم.