• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید تا کنون 6250 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

20 5575 ۱۹ آبان ۹۳

در این مطلب میخوام پلاگینی برای 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: با استفاده از این ویژگی میتونین مشخص کنید که اسکرول افقی در پایین باشه یا بالا

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 20 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

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

  • ‏‏

    سلام
    عذر خواهی میکنم .. من واسه body گذاشتم خیلی خوب کار میکنه ولی برای یک iframe که درون یک div قرار داره گذاشتم کار نمیکنه …div یک id داره و iframe هم یک id … میشه راهنمایی کنید .. ممنونتون میشم … کدش رو اینجوری نوشتم :

  • ‏‏
    جواد(۲ تیر ۱۳۹۴)

    سلام میشه آموزش بدین چطوری این کد رو برای یک div استفاده کنیم که ظاهرش با اسکرول اصلی سایت متفاوت باشه.
    مثلا اسکرول اصلی سایت سمت راست باشه ولی این سمت چپ.

  • ‏‏

    سلام
    چیکار کنم که اسکرول پنهان نشه؟؟

    • ‏‏
      محمد اسفندیاری(۵ تیر ۱۳۹۴)

      سلام
      این ویژگی cursoropacitymin رو هم در کدهای JS قرار بدین و مقداری بیشتر از 0 رو بهش بدین…..بصورت پیش فرض مقدارش صفر هست و بمعنای اینه که وقتی با اسکرول کاری ندارید ، مخفی میشه/…..مثلا میتونین 0.5 قرار بدین
      موفق باشید

  • ‏‏

    سلام در سرویس هایی مانند رزبلاگ که کد تبلیغات خود را در بالای تگ body قرار میدهند و اسکرول بار در فایرفاکس درست کار نمی کند ; میشه راهنماییم کنید که چه کار کنم اسکرول بار در فایر فاکس درست نمایش داده بشه
    ممنون

  • ‏‏

    سلام
    لطفاً پاسخ بنده رو بدهید؛ اگر بخواهم با جاوا اسکریپت خام عرض خود اسکروبار مرورگر رو بدست بیارم از چه طریقی میتونم این کارو بکنم؟
    ممنون میشم اگز راهنمایی کنید.

  • ‏‏
    دیزاینر(۲۸ فروردین ۱۳۹۵)

    خوب بود ممنون افکت های دیگه هم بذارین – تشکر

  • ‏‏
    sheriff hasanzadeh(۱۱ تیر ۱۳۹۵)

    سلام
    من ابنو واسه یه div دیگه استفاده کردم کار نکرد چرا؟؟؟؟؟؟؟

  • ‏‏
    sheriff hasanzadeh(۷ مهر ۱۳۹۵)

    سلام
    من استفاده کردم ولی نمیدونم دیر بالا میاد دلیلش چیه؟یعنی باید دوسه بار موس رو بالا پایین بپرم تا فعال بشه
    دلیلش چیه؟

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram