اسکرول های دلخواه با Jquery

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

 

نمایش زنده یا دمو    دانلود   سایت سازنده 

 

طرز استفاده :

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

 

<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="jquery.mousewheel.min.js" type="text/javascript"></script>

 

اولی که استایل خود پلاگین است ، دومی کتابخانه Jquery هست که اگر قبلا در سایتتان لود کردید لازم نیست دوباره این کار را بکنید . سومی jquery-ui که کتابخانه توسعه دهنده ی Jquery می باشد و دارای پلاگین های آماده زیادی می باشد . سومی افکت Ease ایجاد می کند و چهارمی برای استفاده از حرکت اسکرول موس در اسکرول کردن استفاده می شود .

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

<div id="mcs_container">
<div class="customScrollBox">
<div class="container">
<div class="content">
<p>Your long content goes here...</p></div>
</div>
<div class="dragger_container">
<div class="dragger"></div>
</div>
</div>
</div>

اسم آیدی mcs_container مهم نیست و فقط برای تمیز دادن بین چند اسکرول در یک صفحه از آیدی های مختلف استفاده می کنیم .

اما کلاس های container و content لازم میس باشند که به همین شکل مطالب درون کلاس content قرار بگیرند .

در مرحله آخر کافیست پلاگین را لود کنید و مشخصات دلخواه برای اسکرول را بصورت تابع به پلاگین بدهید :

<script>
$(window).load(function() {
$("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);
});
</script>
<script src="jquery.mCustomScrollbar.js" type="text/javascript"></script>

همانطور که مشاهده می کنید در خط سوم برای آیدی mcs_container تابع mCustomScrollbar اعمال شده است که از چپ به راست مشخصات زیر را به آن داده ایم :

1- عمودی

2- زمان افکت ease

3- نوع افکت  ease

4- مقدار فضای اضافی که به اسکرول عمودی فقط میدهیم ، این گزینه ارتفاع برای اسکرول عمودی و عرض برای افقی را مشخص می کند که بصورت auto باشد یا fix ( حالت auto بصورت خودکار ارتفاع را بر اساس حجم متن تنظیم می کند ) ،

5- پشتیبانی از حرکت اسکرول موس روی اسکرول صفحه

6-  استفاده از دگمه برای حرکت اسکرول

7 – سرعت حرکت اسکرول در هنگام زدن دگمه ساخته شده در مرحله قبل ( 1 کمترین سرعت و 20 بیشترین سرعت )

( توجه کنید که اگر چند اسکرول در صفحه قرار می دهید فقط تخصیص دادن تابع mCustomScrollbar باید تکرار شود و لود کردن کتابخانه ها در اول نوشته و لود کردن پلاگین در آخرین خط کد ها دوباره لازم نیست ، فقط می بایست به آیدی المان دیگر ، خط دوم تا چهارم را تکرار کنیم )

در فایل دانلودی 3 فایل HTML هست که سایت سازنده آن را ایجاد کرده که برای حالت های مختلف مثل داشتن دگمه ، لود داینامیک یا رفع برخی باگهای jquery مثال آورده شده ، سورس آنها را ببینید همچنین دمویی که اینجا آپلود کردم را هم می توانید مشاهده کنید .

 


7 پاسخ به “اسکرول های دلخواه با Jquery”

  1. فرهاد گفت:

    سلام

    من روی لوکال یه ایندکس ساختم
    بعد یه بکس برای آر اس اس گذاشتم که عنوان و لینک تایپیک های انجمن رو نشون میده

    بعد داخل یه باکس کوچیک جا دادمش

    خواستم از اسکرولی که گذاشتین استفاده کنم

    اما نمیشه

    با آموزش شما هم پیش رفتم

    ممنون میشم راهنماییم کنید

    حالا اگه این جی کوئری هم نشد مشکل داره

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

    • با کم کردن شرایط احتمال خطا پیش روید و باگ گیری کنید . اول بصورت معمولی و نوشته های استاتیک ببینید کار میکنه یا نه . اگر کار کرد مشکل از آر اس اس ها هست و اگر کار نکرد مشکل از کد ها هست .
      حتما کنسول فایرباگ را مشاهده کنید که اروری نداده باشد .

  2. سلام
    من نمیدونم چرا بعضی‌ها سایت رو با وبلاگ اشتباه می‌گیرند.
    این که شما دارید سایت هست نه وبلاگ.
    لطفا تصحیح شود.

    • سلام ، برای مطالعه فرق وبلاگ با وبسایت به این جا میتوانید رجوع کنید :
      http://weblognews.ir/1388/04/forms/note/3081
      وبلاگ را بر اساس ساب دامنه از یک دامنه اشتراکی مثل بلاگفا یا غیره نباید شناخت دوست عزیز ، وبلاگ دست نوشته های شخصی و آزادانه نویسنده و قرار گرفتن پست ها پشت سر هم بر اساس تاریخ است . حال میخواهد دامنه اختصاصی یا طراحی اختصاصی داشته باشد یا خیر

  3. سلام
    میگم الان یه مشکل دیگه هم دیدم.
    وقتی که نظر رو ارسال میکنی اصلا نمینویسه که ارسال شده یا خطا داده.
    اینو هم درست کنید برای یه برنامه نویس تحت وب زشته.

  4. davood گفت:

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *