custom-content-scroller : پلاگین jQuery برای ویرایش ظاهر scrollbar

- visibility ۲۱ mode_comment

در این مطلب میخوام یک پلاگین jQuery بنام custom-scrollbar رو خدمت شما معرفی کنم و اونو آموزش بدم.

custom-scrollbar

با استفاده از این پلاگین میتونین به راحتی هر چه تمامتر ظاهر اسکرول بار کل سایتتون و همچنین هر المنتی که نیاز به اسکرول داره رو عوض کنید. همچنین با استفاده از این پلاگین میتونین امکانات پیشرفته ای مانند Touch و استفاده از Keyboard و Mouse Wheel و ... رو اضافه کنید. پشتیبانی این پلاگین از انواع مرورگرها خیلی خوبه و میتونین با اطمینان خاطر از اون استفاده کنید.

میبینید که ظاهر اسکرولبار عوض شده و با اسکرول کردن اون المنت ، محتوای اون با حالت زیبایی جابجا میشن.

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

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به jQuery و jquery.mCustomScrollbar.concat.min.js و jquery.mCustomScrollbar.min.css نیاز داریم. من این فایلهارو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید.

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

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم.

من برای مثال یک div با id = sample ساختم و برای اینکه اسکرول رو امتحان کنم ، محتوای زیادی رو درون اون قرار دادم. از اینجا به بعد باید از پلاگین و امکاناتی که در اختیارمون میزاره استفاده کنیم. من عرض و ارتفاع div رو میخوام با استفاده از پلاگین مشخص کنم.

میبینید که اول با استفاده از jQuery المنت مورد نظر رو انتخاب کردیم ، بعد از اون متد mCustomScrollbar رو برای اون فراخوانی کردیم. این متد ، ویژگی های فراوانی رو داره که در بالا دو موردش رو بیان کردم. با استفاده از ویژگی setHeight و setWidth میتونین ارتفاع و عرض المنت مورد نظر رو مشخص کنید. در زیر مهمترین ویژگی های این پلاگین رو براتون قرار دادم.

  •  theme : با استفاده از این ویژگی میتونین ظاهر مورد نظرتون رو انتخاب کنید. لیست کامل تم ها رو در این صفحه میتونین ببینید.
  • autoHideScrollbar : اگر true باشه اسکرولبار مخفی هست و هر زمان که ماوس روی المنت بره ، ظاهر میشه
  • autoExpandScrollbar : اگر true باشه زمانی که روی اسکرولبار هاور کنید ، عرض اون بزرگتر میشه
  • mouseWheel : اگر این خاصیت رو فعال کنید ، با استفاده از Mouse Wheel که که بین دو کلیک راست و چپ هست ، میتونین اسکرول کنید. برای فعال کردن بصورت زیر عمل کنید :
  • scrollButtons : اگر true قرار بدین ، دکمه های بالا و پایین اضافه میشه ، بصورت زیر : scroll1
  • keyboard : اگر true قرار بدین ، با استفاده از کلیدهای بالا و پایین و راست و چپ و Pade Down و Page Up میتونین اسکرول کنید
  • contentTouchScroll : با استفاده از این ویژگی میتونین خاصیت Touch رو برای وسایلی که لمسی هستند فعال کنید

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

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

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

comment دیدگاه کاربران
rezad91

سلام ببخشید اگر بخواهیم تعییرات شخصی(استایل) به اسکرول بدهیم از چه کدی باید استفاده کنیم؟
آیا میشه به تگ overflow:scroll استایل بدیم ، بدون استفاده از جی کوئری ؟
یا حق

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

برای اینکه اسکرول رو به استایل مد نظر خودتون تبدیل کنید ، میتونین به سایت این ابزار برید و به پایین اسکرول کنید و قسمت Scrollbar styling & themes رو مطالعه کنید…..در اونجا همچنین یک تصویر قرار داده و نام هر قسمت از اسکرولبار رو نوشته

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

محمد

سلا
خسته نباشید.
یک سوال دارم :
چه جوری می تونم آخرین مطالب سایت رو به صورت اسکرول بار به نمایش در بیارم؟
باتشکر

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

اونا رو درون یک div قرار بدین و همانند توضیحات بالا مراحل رو انجام بدین
فرقی نمیکنه محتوای اون چی باشه
موفق باشید

محمد

سلام
من می خواهم آخرین مطالب سایتمو این شکلی کنم http://uupload.ir/files/f9co_capture.jpg
لطفا کمک کنید چون به هر سایتی رفتم نتونستم چیزی پیدا کنم. 🙄

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

ببینید از اینا خوشتون میاد
http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html
اگر بله نحوه استفاده ازشون رو توضیح دادم

محمد

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

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

برید اینجا
http://bigtheme.ir/%DA%A9%D8%AF-%D8%A2%D8%AE%D8%B1%DB%8C%D9%86-%D9%85%D8%B7%D8%A7%D9%84%D8%A8-%D9%88%D8%B1%D8%AF%D9%BE%D8%B1%D8%B3/
توضیح داده چطوری آخرین مطالب رو دریافت کنید

Pouriya Ariyafar

سلام اقای اسفندیاری
ممنون برای این اموزش
من از این استفاده کردم ولی نمیدونم چرا اسکرولم سمت چپ محتوا رفت
هر کاری هم کردم نشد سمت راست محتوا بره، ب نظر شما مشکل از چی میتونه باشه؟
direction هم چپ و راست، راست و چپ کردم فرقی نکرد

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

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

Pouriya Ariyafar

کدهاش وبلاگی هست html خالی نیس
این ادرس رو لطفا نگاه کنید من اینجا قالب تست میکنم site

یک چیز عجیب برخوردم اقای اسفندیاری
ویژگی scrollButtons برای این بود که کلیک بالا و پایین برای اسکرول کردن رو مشخص میکرد وقتی true بود یعنی فعاله (لطفا عکس رو نگاه کنید) من همین کد بالایی یعنی کدهای شما رو استفاده کردم و درون اون کدهاویژگی scrollButtons فعاله یعنی true ولی اون دکمه ها در قالب نیستند

http://bayanbox.ir/view/5590420950430723057/gh1.jpg

چون کدها وبلاگی هس نفرستادم، اگر لازمه بگید حتما میفرستم
مممنون برای پاسختون

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

تو کدهاتون setHeight: 100%;, رو قرار دادین……اون ; رو باید حذف کنید…اشتباهی وارد کردید

Pouriya Ariyafar

درستش کردم
700 هم گذاشتم ولی فرقی نکرد
http://bayanbox.ir/view/1363308702460400011/5342.jpg

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

نمیدونم چرا ولی دو تا تگ a با کلاسهای mCSB_buttonUp و mCSB_buttonDown اضافه نمیشه!!

Pouriya Ariyafar

اره
دیدم این دو تا تگ اجرا نمیشن
میشه دستی وارد کرد؟؟

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

نه نمیشه
مشکل رو پیدا کردم
شما اول اون تصویر mCSB_buttons.png که در فایل zip قرار داره رو به همونجایی که فایل Css وجود داره، آپلود کنید
بعدش اون کدهای JS رو آخر بزارین و onload رو بردارید…بصورت زیر:
(function($) {
$(".content-wrp").mCustomScrollbar({
setHeight: 700,
setWidth: 500,
theme: "rounded-dots-dark",
autoHideScrollbar: false,
autoExpandScrollbar: true,
scrollButtons: {
enable: true
},
keyboard: {
enable: true
},
contentTouchScroll: 25
});
})(jQuery);

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

این تصویر mCSB_buttons.png رو آپلود کردید و در همونجایی که فایل css هست قرار دادین؟

Pouriya Ariyafar

من اصلا تصویری اپلود نکردم، کلا 3 تا فایل برای این اپلود کردم، همون هایی که در فایل زیپ شده این پست شما قرار دادید،
jquery.mCustomScrollbar.concat.min.js
jquery.min.js
jquery.mCustomScrollbar.css

کدهایی که قرار دادم

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

یک تصویر هم در اون فایل زیپ هست که آیکونا توش قرار داره

Pouriya Ariyafar

دمت گرم محمد جان که با خونسردی و کامل جواب من رو دادی
مرسی
ان شالله همیشه شاد و موفق باشی رفیق

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

خواهش میکنم موفق باشی

نیاز به لاگین

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