کتابخانه
simplebar یه کتابخونه جاوااسکریپت و CSS برای جایگزین کردن اسکرول بار پیش فرض مرورگره که ظاهرش رو خودت با CSS تعیین می کنی. رفتار اسکرول همون اسکرول طبیعی مرورگر می مونه و فقط شکل نوار عوض می شه. برای منوهای کناری، کادر چت، جدول ها و هر بخش اسکرول داری مناسبه.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۱۲۸ کیلوبایت· ۸ فایل· انتشار
SHA-256: 0cc7eed02c59021ca6c8f0ea79bca2bf57e424a6840e70e5ed5ebf171884b244
اسکرول بار پیش فرض مرورگرها روی هر سیستم عامل یه شکل داره. روی ویندوز یه نوار خاکستری و کلفت کنار سایدبار تیره می شینه و کل طراحی رو خراب می کنه. روی مک معمولا فقط وقتی اسکرول می کنی دیده می شه. simplebar برای همین ساخته شده: یه کتابخونه جاوااسکریپت که ظاهر اسکرول بار رو عوض می کنه و رنگ، ضخامت و گوشه های نوار رو با CSS خودت تنظیم می کنی.
نکته اصلی اینه که simplebar خود اسکرول رو از نو پیاده سازی نمی کنه. اسکرول همون اسکرول بومی مرورگره، فقط نوار پیش فرض مخفی می شه و یه نوار دیگه جاش کشیده می شه. برای همین چرخ ماوس، تاچ، تاچ پد و کلیدهای صفحه کلید مثل قبل کار می کنن و لازم نیست نگران حس اسکرول باشی. کتابخونه هایی که اسکرول رو شبیه سازی می کنن معمولا همین جا دردسر درست می کنن.
جاهایی که simplebar به دردت می خوره زیاده: پنل مدیریت و داشبورد، سایدبار قالب های وردپرسی، کادر چت و کامنت، لیست های بازشونده، بلوک کد و جدول داخل مودال. برای اسکرول کل صفحه ازش استفاده نکن، چون برای اسکرول یه المان طراحی شده. اگه فقط می خوای نوار نازک تر یا رنگی تر بشه، ویژگی های CSS مثل scrollbar-width و scrollbar-color شاید کافی باشن و لازم نشه کتابخونه اضافه کنی. فقط قبلش پشتیبانی مرورگرهای مخاطب هات رو چک کن.
موقع استفاده چند چیز رو یادت باشه. فایل CSS کتابخونه باید کنار فایل جاوااسکریپت لود بشه، وگرنه نوار درست نمایش داده نمی شه. المانی که می خوای اسکرول دار بشه هم باید height یا max-height داشته باشه. بدون اون چیزی سرریز نمی شه و اسکرولی لازم نیست. برای سایت های فارسی و راست به چین هم روی صفحه خودت تست بگیر و جای نوار رو ببین. یه نکته دیگه هم برای ما ایرانی ها هست: وقتی اینترنت بین الملل محدوده، فایل هایی که از سرویس های خارجی لود می شن گاهی نمیان و کار می شکنه. بهتره فایل ها رو روی هاست خودت نگه داری.
نسخه های رسمی و بدون تغییر simplebar، که کتابخونه ای متن بازه، توی مخزن داخلی Wbweb هم هست. می تونی بدون وابستگی به منبع خارجی دانلودشون کنی و کنار فایل های سایتت بذاری.
کار با simplebar چند قدم ساده بیشتر نداره و کد آماده اش پایین همین صفحه هست.
اگه پروژه ات با React نوشته شده، کتابخونه یه بسته جدا برای ری اکت هم داره. گزینه هایی مثل autoHide هم برای تنظیم رفتار نوار هست. اگه نوار نمایش داده نشد، اول چک کن فایل CSS لود شده باشه و المان ارتفاع داشته باشه.
simplebar یه کتابخونه جاوااسکریپت و CSS برای عوض کردن ظاهر اسکرول بار المان هاست. نوار پیش فرض مرورگر مخفی می شه و یه نوار قابل استایل جاش می شینه. خود اسکرول همون اسکرول بومی مرورگر می مونه، برای همین حس کار با ماوس و تاچ تغییر نمی کنه.
نه. simplebar یه کتابخونه مستقله و لازم نیست jQuery روی صفحه باشه. می تونی با ویژگی data-simplebar یا با ساختن یه نمونه از SimpleBar توی کد خودت ازش استفاده کنی. اگه با ری اکت کار می کنی، یه بسته جدا مخصوص اون هم هست.
معمولا یکی از دو دلیل داره: یا فایل CSS کتابخونه لود نشده، یا المان ارتفاع مشخص نداره و چیزی سرریز نمی شه. برای المان height یا max-height بذار و توی ابزار توسعه دهنده مرورگر چک کن فایل CSS درست لود شده باشه.
نه، برای اسکرول یه المان مشخص مثل سایدبار، مودال یا کادر چت ساخته شده. برای اسکرول کل صفحه بهتره همون اسکرول خود مرورگر رو بذاری. اگه فقط رنگ و ضخامت نوار برات مهمه، ویژگی های CSS مثل scrollbar-color رو هم بررسی کن.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.