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

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

خبر خوب این است که برای ساختن اسکرول بار سفارشی وردپرس به افزونه، جاوااسکریپت یا ابزارهای پیچیده نیاز ندارید. چند خط CSS در بخش «CSS اضافی» وردپرس یا فایل استایل قالب، کنترل مناسبی روی رنگ نوار، رنگ دستگیره، ضخامت و حتی اسکرول‌بار بخش‌های داخلی به شما می‌دهد. البته این کار باید با توجه به مرورگرها، کنتراست رنگی، نسخه موبایل و دسترسی‌پذیری انجام شود؛ چون یک اسکرول‌بار زیبا اگر پیدا کردن یا استفاده از آن را دشوار کند، نتیجه معکوس خواهد داشت.

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

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

ساده‌ترین روش برای ساخت اسکرول‌بار اختصاصی، استفاده از شبه‌المان‌های CSS در مرورگرهای مبتنی بر Chromium مانند Chrome، Edge و Opera و همچنین تعریف ویژگی استانداردتر scrollbar-color برای Firefox است. برای شروع، کد زیر را در مسیر «نمایش ← سفارشی‌سازی ← CSS اضافی» قرار دهید:

/* اسکرول‌بار سفارشی سایت */

html {
scrollbar-color: #2563eb #e5e7eb;
scrollbar-width: thin;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #e5e7eb;
}
::-webkit-scrollbar-thumb {
background: #2563eb;
border-radius: 999px;
border: 2px solid #e5e7eb;
}
::-webkit-scrollbar-thumb:hover {
background: #1d4ed8;
}

در این کد، مقدار width ضخامت اسکرول‌بار عمودی و مقدار height ارتفاع اسکرول‌بار افقی را مشخص می‌کند. بخش track مسیر حرکت اسکرول‌بار است و thumb همان دستگیره‌ای است که کاربر آن را جابه‌جا می‌کند. وجود border باعث می‌شود دستگیره از مسیر جدا دیده شود و ظاهر نرم‌تری پیدا کند.

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

فهرست مطالب

• چرا اسکرول‌بار سفارشی برای تجربه کاربری مهم است؟
• کد اسکرول‌بار را در وردپرس کجا قرار دهیم؟
• کد کامل و حرفه‌ای برای اسکرول‌بار
• ساخت اسکرول‌بار برای یک بخش خاص
• نکات ریسپانسیو و دسترسی‌پذیری
• خطاهای رایج و روش رفع آن‌ها
• مزایا و معایب این روش
• سؤالات متداول

چرا اسکرول‌بار سفارشی برای تجربه کاربری مهم است؟

هماهنگی جزئیات رابط کاربری

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

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

تأثیر بر درک مسیر اسکرول

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

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

آیا تغییر اسکرول‌بار روی سئو اثر مستقیم دارد؟

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

در عمل، اولویت باید با Core Web Vitals، ساختار محتوایی، سرعت بارگذاری و خوانایی باشد. اسکرول‌بار سفارشی قرار نیست ضعف‌های فنی سایت را جبران کند. برای بررسی مسائل مهم‌تر، بهینه‌سازی تصاویر، کش و فایل‌های CSS، مطالعه راهنمای افزایش سرعت وردپرس معمولاً اثر بیشتری بر عملکرد واقعی سایت دارد.

کد اسکرول‌بار را در وردپرس کجا قرار دهیم؟

روش اول: بخش CSS اضافی وردپرس

برای بیشتر سایت‌ها، امن‌ترین و سریع‌ترین مسیر همین است. وارد پیشخوان وردپرس شوید و از مسیر «نمایش»، گزینه «سفارشی‌سازی» و سپس «CSS اضافی» را باز کنید. کد را در این بخش قرار دهید، روی «انتشار» بزنید و صفحه سایت را در یک پنجره ناشناس مرورگر بررسی کنید.

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

روش دوم: فایل style.css قالب فرزند

اگر توسعه‌دهنده سایت هستید یا چندین تغییر CSS سفارشی دارید، قرار دادن کد در فایل استایل قالب فرزند ساختار منظم‌تری ایجاد می‌کند. مطمئن شوید قالب فرزند واقعاً فعال است و فایل CSS آن با اولویت مناسب بارگذاری می‌شود.

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

روش سوم: افزونه‌های درج کد یا صفحه‌ساز

برای این تغییر کوچک معمولاً افزونه لازم نیست. بااین‌حال، اگر سایت شما از یک سیستم مدیریت کد سفارشی استفاده می‌کند، می‌توانید CSS را از همان مسیر اضافه کنید. از نصب افزونه‌ای که فقط برای تغییر اسکرول‌بار ساخته شده است پرهیز کنید؛ چون یک قابلیت ساده نباید وابستگی غیرضروری به سایت اضافه کند.

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

کد کامل و حرفه‌ای برای اسکرول‌بار

نسخه مناسب برای سایت‌های روشن

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

html {

scrollbar-color: #0f766e #f1f5f9;
scrollbar-width: auto;
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
background-color: #0f766e;
border: 3px solid #f1f5f9;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #115e59;
}

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

نسخه مناسب برای قالب‌های تیره

html {

scrollbar-color: #64748b #111827;
scrollbar-width: thin;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #111827;
}
::-webkit-scrollbar-thumb {
background: #64748b;
border: 2px solid #111827;
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}

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

تغییر اسکرول‌بار در حالت هاور

شبه‌کلاس :hover به کاربر بازخورد بصری می‌دهد و نشان می‌دهد دستگیره قابل تعامل است. تغییر رنگ باید ملایم باشد و نباید باعث جابه‌جایی عنصر یا تغییر عرض اسکرول‌بار شود. به همین دلیل در نمونه‌های بالا اندازه دستگیره در حالت عادی و هاور ثابت باقی می‌ماند.

ساخت اسکرول‌بار برای یک بخش خاص

اسکرول‌بار داخل باکس محتوا

گاهی هدف شما تغییر اسکرول‌بار کل صفحه نیست؛ مثلاً یک جدول عریض، فهرست محصولات، منوی کناری یا باکس کد باید اسکرول افقی یا عمودی داشته باشد. ابتدا به عنصر موردنظر یک کلاس بدهید:

<div class="custom-scroll-box">

محتوای طولانی یا عریض شما اینجا قرار می‌گیرد.
</div>

سپس CSS زیر را اضافه کنید:

.custom-scroll-box {

max-height: 320px;
overflow: auto;
padding: 16px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
scrollbar-color: #7c3aed #ede9fe;
scrollbar-width: thin;
}
.custom-scroll-box::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.custom-scroll-box::-webkit-scrollbar-track {
background: #ede9fe;
border-radius: 8px;
}
.custom-scroll-box::-webkit-scrollbar-thumb {
background: #7c3aed;
border-radius: 8px;
}
.custom-scroll-box::-webkit-scrollbar-thumb:hover {
background: #6d28d9;
}

نکته مهم این است که overflow: auto فقط زمانی اسکرول‌بار را نمایش می‌دهد که محتوای داخلی از اندازه باکس بزرگ‌تر باشد. اگر همیشه به اسکرول‌بار نیاز دارید، می‌توانید از overflow-y: scroll استفاده کنید؛ اما در بیشتر طراحی‌ها نمایش شرطی ظاهر تمیزتری ایجاد می‌کند.

اسکرول افقی برای جدول‌های عریض

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

<div class="table-scroll">

<table>
<thead>
<tr>
<th>خدمت</th>
<th>زمان اجرا</th>
<th>وضعیت</th>
</tr>
</thead>
<tbody>
<tr>
<td>بهینه‌سازی قالب</td>
<td>۳ روز کاری</td>
<td>فعال</td>
</tr>
</tbody>
</table>
</div>

.table-scroll {

max-width: 100%;
overflow-x: auto;
scrollbar-color: #2563eb #dbeafe;
scrollbar-width: thin;
}
.table-scroll table {
min-width: 680px;
width: 100%;
border-collapse: collapse;
}
.table-scroll::-webkit-scrollbar {
height: 9px;
}
.table-scroll::-webkit-scrollbar-track {
background: #dbeafe;
}
.table-scroll::-webkit-scrollbar-thumb {
background: #2563eb;
border-radius: 10px;
}

در تجربه اجرای این الگو برای صفحات خدماتی، تعیین min-width برای جدول بهتر از فشرده‌سازی سلول‌ها عمل می‌کند؛ چون عنوان‌ها خوانا می‌مانند و کاربر موبایل به‌جای زوم‌کردن، جدول را به‌صورت افقی جابه‌جا می‌کند.

نکات ریسپانسیو و دسترسی‌پذیری

ضخامت را بیش از حد کم نکنید

اسکرول‌بار باریک ممکن است در صفحه دسکتاپ زیبا به نظر برسد، اما برای کاربران دارای دقت حرکتی پایین یا نمایشگرهای کوچک دشوارتر است. مقدار scrollbar-width: thin در Firefox و عرض ۸ تا ۱۰ پیکسل در مرورگرهای WebKit معمولاً انتخاب متعادلی است. از مخفی‌کردن کامل اسکرول‌بار برای عناصر قابل اسکرول خودداری کنید.

کنتراست رنگی را بررسی کنید

دستگیره باید از مسیر حرکت قابل تشخیص باشد. یک رنگ بسیار نزدیک به پس‌زمینه، حتی اگر از نظر زیبایی جذاب باشد، تجربه کاربر را ضعیف می‌کند. ابزارهای بررسی کنتراست مانند WebAIM Contrast Checker می‌توانند برای ارزیابی رنگ متن و عناصر رابط مفید باشند؛ هرچند اسکرول‌بار در همه ابزارها به‌صورت یکسان تحلیل نمی‌شود.

حالت کنتراست بالا و ترجیحات کاربر

برخی کاربران با حالت کنتراست بالا یا تنظیمات سفارشی سیستم‌عامل کار می‌کنند. استایل‌های تهاجمی مانند استفاده از !important یا حذف کامل نشانه‌های مرورگر می‌تواند این تنظیمات را بی‌اثر کند. CSS را تا حد امکان ساده نگه دارید و اجازه دهید مرورگر در شرایط خاص رفتار دسترسی‌پذیر خود را حفظ کند.

تست در موبایل و مرورگرهای مختلف

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

• صفحه در Chrome، Firefox و Edge به‌درستی اسکرول می‌شود.
• اسکرول افقی ناخواسته در بدنه صفحه ایجاد نشده است.
• باکس‌های داخلی با لمس انگشت قابل حرکت هستند.
• رنگ دستگیره در حالت عادی و هاور قابل تشخیص است.
• اسکرول‌بار روی محتوای اصلی، دکمه‌ها یا متن‌ها قرار نمی‌گیرد.

خطاهای رایج و روش رفع آن‌ها

کد در سایت دیده نمی‌شود

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

گاهی قالب از یک اسکرول‌بار اختصاصی با انتخابگرهای قوی‌تر استفاده می‌کند. در این شرایط ابتدا انتخابگر دقیق‌تری بنویسید، مانند body::-webkit-scrollbar. استفاده فوری از !important پیشنهاد نمی‌شود، چون در ادامه مدیریت کدها را دشوار می‌کند.

فقط در Chrome کار می‌کند

شبه‌المان‌های ::-webkit-scrollbar برای همه مرورگرها استاندارد یکسانی نیستند. برای Firefox باید ویژگی‌های scrollbar-color و scrollbar-width را نیز اضافه کنید. اگر ظاهر دقیق در همه مرورگرها یکسان نیست، طبیعی است؛ هدف اصلی باید خوانایی، عملکرد و هماهنگی کلی باشد.

اسکرول‌بار صفحه ناپدید شده است

بررسی کنید در کدهای دیگر از overflow: hidden روی html یا body استفاده نشده باشد. این ویژگی گاهی برای اسلایدر، منوی موبایل یا پنجره پاپ‌آپ نوشته می‌شود و اگر بدون کلاس فعال باقی بماند، اسکرول کل صفحه را متوقف می‌کند.

اسکرول افقی ناخواسته ایجاد شده است

این مشکل معمولاً از عنصری با عرض ثابت، تصویر بزرگ، جدول یا کدی با مقدار width: 100vw ایجاد می‌شود. ابتدا با ابزار Inspect مرورگر، عنصر بیرون‌زده از عرض صفحه را پیدا کنید. صرفاً مخفی‌کردن اسکرول افقی با overflow-x: hidden همیشه راه‌حل مناسبی نیست؛ چون ممکن است بخشی از محتوا را پنهان کند.

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

مزایا و معایب این روش

مزایای اسکرول‌بار CSS

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

معایب و محدودیت‌ها

• نمایش دقیق آن در همه مرورگرها کاملاً یکسان نیست.
• در دستگاه‌های لمسی کنترل ظاهر اسکرول‌بار محدودتر است.
• رنگ‌گذاری اشتباه می‌تواند دسترسی‌پذیری را کاهش دهد.
• کد CSS به‌تنهایی مشکلات اسکرول ناشی از ساختار قالب را حل نمی‌کند.
• در صورت استفاده از انتخابگرهای نادرست، ممکن است اسکرول‌بار بخش‌های داخلی تغییر کند.

آیا افزونه انتخاب بهتری است؟

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

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

راهنمای سریع اجرای اسکرول‌بار سفارشی وردپرس

برای اجرای بدون دردسر، این ترتیب را دنبال کنید:

• رنگ اصلی، رنگ مسیر و ضخامت مناسب را از سیستم طراحی سایت انتخاب کنید.
• کد پایه را در بخش CSS اضافی قرار دهید.
• کش وردپرس، مرورگر و CDN را پاک کنید.
• صفحه را در Chrome، Firefox و یک دستگاه موبایل بررسی کنید.
• کنتراست دستگیره و مسیر را با محتوای صفحه مقایسه کنید.
• اگر فقط یک باکس باید اسکرول شود، به‌جای تغییر کل صفحه از کلاس اختصاصی استفاده کنید.
• پس از تأیید نهایی، کد را در قالب فرزند یا مستندات پروژه ثبت کنید.

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

سؤالات متداول

آیا برای ساخت اسکرول‌بار سفارشی وردپرس به افزونه نیاز داریم؟

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

کد اسکرول‌بار را در کدام بخش وردپرس قرار دهیم؟

برای آزمایش و تغییرات محدود، مسیر «نمایش ← سفارشی‌سازی ← CSS اضافی» مناسب است. در پروژه‌های حرفه‌ای‌تر، فایل style.css قالب فرزند انتخاب منظم‌تری خواهد بود.

چرا تغییرات اسکرول‌بار در Firefox با Chrome یکسان نیست؟

Chrome و مرورگرهای مشابه از شبه‌المان‌های ::-webkit-scrollbar استفاده می‌کنند، اما Firefox بیشتر ویژگی‌های scrollbar-color و scrollbar-width را پشتیبانی می‌کند. به همین دلیل باید هر دو روش را در کد قرار دهید و انتظار یکسانی صددرصدی نداشته باشید.

آیا می‌توان فقط اسکرول‌بار یک div را تغییر داد؟

بله. کافی است به آن عنصر یک کلاس بدهید و انتخابگرهای مربوط به اسکرول‌بار را با همان کلاس بنویسید؛ برای نمونه .custom-scroll-box::-webkit-scrollbar. همچنین باید برای عنصر مقدار overflow: auto یا overflow: scroll تعریف شود.

آیا اسکرول‌بار سفارشی سرعت سایت را کاهش می‌دهد؟

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

بهترین رنگ برای اسکرول‌بار چیست؟

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

جمع‌بندی

برای ساخت اسکرول بار سفارشی وردپرس بدون افزونه، CSS بهترین نقطه شروع است. با ترکیب scrollbar-color و scrollbar-width برای Firefox و شبه‌المان‌های WebKit برای Chrome و Edge، می‌توانید ظاهر اسکرول‌بار صفحه یا یک بخش مشخص را کنترل کنید.

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