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

مسیح دیندار
مدیریت
عضو شده: 2021-04-12 14:23:35
2021-05-22 06:39:04

اسکرول بار - Scroll Bar ها بخشی از طراحی هر سایتی به شمار میان که به کاربر اجازه دسترسی و حرکت در تمامی بخش های سایت رو به کاربر میده. صفحات طولانی که کاربران سعی می کنند به محتویات پایین تر اون دسترسی پیدا کنند، با ویژگی اسکرول بار ساخته میشه.

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

برای اینکار دو راه وجود داره.

1 - مخفی کردن اسکرول بار

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

.talkina {overflow-y: auto !important;}

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

 

2 - غیرفعال کردن کامل اسکرول بار

همونطور که گفتم بعضی اوقات یک محدوده ای طراحی کردید (مثلا خلاصه مطلب زیر یک تصویر مطلب) که می خواهید اندازه همه خلاصه مطلب ها یک اندازه باشه و اگه اون بخش از محتوا رو نمی تونید با توابع خاص، برش بدید، پس بهتره با دستور CSS اونها رو یک اندازه کنید و بعد امکان اسکرول رو از کاربر بگیرید:

.talkina {overflow-y: hidden !important;}

کد بالا اسکرول بار عمودی (پیش فرض سایت) رو غیرفعال می کنه اما شما می تونید از overflow-x برای غیرفعال کردن اسکرول بار افقی و تنظیم عرض یک المنت، استفاده کنید.