Nicescroll : تغییر ظاهر اسکرول ( Scroll ) مرورگرها

- visibility ۲۴ mode_comment

در این مطلب میخوام پلاگینی برای jQuery رو بهتون معرفی کنم که با استفاده از اون میتونین ظاهر scroll bar سایتتون در مرورگرها رو تغییر بدین و به اسکرول مورد علاقه خودتون برسید.

روش استفاده از این پلاگین بسیار ساده است. با استفاده از این پلاگین میتونین ظاهر اسکرول رو برای عناصر زیر تغییر بدین :

  • Divs
  • textarea
  • IFrames
  • body ( اسکرول کلی سایت )

پشتیبانی این پلاگین از مرورگرها بسیار زیاده. در زیر میتونین ببینید که چه مرورگرهایی از این پلاگین پشتیبانی میکنن. حتی در IE6 هم درست کار میکنه.

nice1nice2nice3nice4nice5میبینید که پشتیبانی خوبی از انواع مرورگرها و انواع دستگاه ها داره و میتونین مطمئن باشید که هر کسی وارد سایتتون شد ، ظاهر اسکرول بار بخوبی براش عوض شده.

نحوه استفاده :

میدونید که برای استفاده از پلاگین jQuery ، باید خود کتابخونه jQuery رو هم به سندتون اضافه کنید. من فایل jquery.nicescroll.min.js رو در انتهای همین مطلب براتون قرار دادم و شما میتونین اونو دانلود کنید و ازش استفاده کنید.

خب فایلی بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

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

این پلاگین از jQuery 1.4+ پشتیبانی میکنه.

برای استفاده از این پلاگین حتما از document ready statement استفاده کنید.

برای اینکه ظاهر اسکرول رو عوض کنیم ، کافیه که کد زیر رو در بین دو تگ script قرار بدین :

حالا اگر وارد مرورگر بشید ، میبینید که ظاهر اسکرول عوض شده. میبینید که ما برای html این کارو انجام دادیم. این کار رو میتونیم برای هر div یا textarea یا iframe انجام بدیم. اگر هیچ خصوصیتی به این تابع فرستاده نشه ، مقادیر پیش فرض اعمال میشه.

تعدادی خصوصیتهایی که وجود داره زیاد هستن ، که من در پایین بعضی از اونارو توضیح میدم :

  • cursorcolor : با استفاده از این ویژگی میتونین رنگ اسکرول رو تغییر بدین
  • cursorwidth : با استفاده از این ویژگی میتونین عرض اسکرول رو تغییر بدین
  • cursorborderradius : میتونین میزان گرد بودن گوشه های اون رو مشخص کنیم
  • touchbehavior : میتونین بگین که حالت لمسی داشته باشه یا نه
  • railalign : با استفاده از این ویژگی میتونین مشخص کنید که اسکرول عمودی در سمت چپ باشه یا راست
  • railvalign: با استفاده از این ویژگی میتونین مشخص کنید که اسکرول افقی در پایین باشه یا بالا

برای مطالعه همه ویژگی ها و همچنین دیگر امکانات این پلاگین ، میتونین به سایت اصلی اون مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

comment دیدگاه کاربران
mahdi abaszadeh

ببخشید چطوری میشه کلا دکمه اسکرول رو پاک کنی؟
من صفحه م اسکرول خودکار میخوره برای همین نمیخوام که دکمه ش نشون داده بشه

محمد اسفندیاری

منظورتون از دکمه چیه دوست عزیز؟

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2