اسکریپت اسکرولبار nicescroll + آموزش استفاده

دسته‌ها : آموزش, جی کوئری, وردپرس علی میرزائی 19 دیدگاه‌ها

اسکرولبار nicescroll

نایس اسکرول (nicescroll) نام اسکریپت متن باز و رایگانی است که تحت فریم ورک جی کوئری نوشته شده. این اسکریپت – همانطور که از نامش پیداست – حالت پیشفرض اسکرول بار مرورگر را – هنگام مشاهده وبسایت شما – دستخوش تغییر کرده و به آن فرم جدیدی می بخشد.
اما داستان به اینجا ختم نمی شود! نایس اسکرول، ویژگی های زیادی دارد که از جمله آنها می توان به موارد زیر اشاره کرد:

  • نصب ساده و راحت
  • استایلی شیک و زیبا با قابلیت شخصی سازی
  • قابلیت استفاده از تگ body
  • پیمایش انیمیشنی
  • سازگاری با تمامی مرورگرها
  • قابلیت زوم
  • سازگار با دستگاه های مختلف + پشتیبانی از لمس
  • و…

جهت استفاده از این اسکریپت، ابتدا می بایست ماژول jquery.nicescroll.min را به همراه کتابخانه jquery در پوسته خود فراخوانی کنید و سپس با استفاده از تابع niceScroll، قدم به دنیای اسکرول بارهایی متفاوت بگذارید. :)

به عنوان نمونه…

تغییر اسکرول بار پیشفرض صفحه سایت + استایلی مجزا:

JAVASCRIPT

$("body").niceScroll({
	preservenativescrolling: false,
	cursorwidth: '8px',
	cursorborder: 'none',
	cursorborderradius:'0px',
	cursorcolor:"#39CCDB",
	background:"#999999"
 });

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

HTML

<div id="divexample2">
  <div id="wrapperexample2">
  <p>test text</p>
  </div>
</div>

JAVASCRIPT

$("#divexample2").niceScroll("#wrapperexample2",{boxzoom:true});

دیدگاه کاربران در مورد این نوشته

  1. سلام
    من میخواستم وقتی ماوس روی div هست مخفی نشه و وقتی ماوس رفت مخفی شه چطور اینکار رو بکنم؟

    توسط شریف پاسخ

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

    توسط نسرین پاسخ

    1. سلام. منظورتون چه نوع تابعیه؟!؟

      توسط علی میرزائی پاسخ

  3. با سلام
    چطور میشه ارتفاع اسکرول را تغییر داد؟
    با تشکر

    توسط سارا پاسخ

  4. سلام
    خیلی ممنون
    تغییراتی در کد دادم و در کدنویسی این وبلاگ ازش استفاده کردم :
    http://tiny.alimir.ir/TH7

    توسط سعید پاسخ

    1. آفرین، خیلی خوب شده :)

      توسط علی میرزائی پاسخ

  5. سلام من میخوام اسکرول بار رو توی سایت به سمت راست منتقل کنم.
    میشه راهنماییم کنید

    توسط علی پاسخ

  6. با سلام می خواستم بدونم میتونم این اسکرول رو افقی کنم

    توسط sam پاسخ

    1. سلام. احتمالا در ورژن جدید، این قابلیت هم اضافه شده باشه! این لینک رو بررسی کنید:
      http://tiny.alimir.ir/tB

      توسط علی میرزائی پاسخ

  7. سلام وایبر من در لب تاپ اسکرول بار نداره چطور می تونم ایجادش کنم

    توسط حبیب پاسخ

    1. سلام، این رو میتونید در بخش “پشتیبانی وایبر” مطرح کنید. من اطلاعی از این موضوع ندارم.

      توسط علی میرزائی پاسخ

  8. سلام دوست عزیز
    ممنون از مطلب
    میشه حرکتی انجام داد که اسکرول hidden نشه؟
    با تشکر

    توسط مهرداد پاسخ

    1. سلام مهرداد جان، بله میتونید این کار رو با اضافه کردن کد زیر، به تنظیمات تابع nicescroll انجام بدید:
      autohidemode: false

      توسط علی میرزائی پاسخ

  9. سلام دوستان ، وقت بخیر .
    جناب میرزائی ، من از این پلاگین استفاده کردم دوتا مشکل وجود داره :
    1 – نمیشه آی دی دیگه ای بجای آی دی در نظر گرفته شده استفاده کرد ! یعنی نمیشه divexample2 رو تغییر داد !
    2 – whidth برای این آی دی تعریف شده که نتونستم تغییرش بدم ، و در فایل جی کوئری هم پیداش نکردم !
    ممنون میشم راهنماییم کنید .

    توسط mohammad پاسخ

  10. سلام،

    باتشکر از مطلب خوبتون ، این اسکرول بار در کروم تست کردم، نشون داد در فایرفاکس اما… کار نکرد.
    روش هایی هست که در تمامی مرورگر ها کار میکنه

    توسط نوید میرزاآقازاده پاسخ

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

      توسط علی میرزائی پاسخ

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

    توسط احسان پاسخ

    1. سلام احسان خان،
      البته من برای همیار وردپرس کار نمیکنم، ولی خب همه چی که پول نیست!
      این رو هم دوستان همیاری لطف کردن تا افزونه ام رو در سایتشون معرفی کنم.

      توسط علی میرزائی پاسخ

  12. زور جوانه :)

    توسط sirvan پاسخ

دیدگاه خود را بیان کنید