جشنواره فطر سون لرن

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

دسته بندی: جاوا اسکریپت
زمان مطالعه: 5 دقیقه
۲۳ بهمن ۱۳۹۳

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

custom-scrollbar

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>7Learn.com - jquery-custom-content-scroller</title>
	<link rel="stylesheet" type="text/css" href="jquery.mCustomScrollbar.min.css">
	<style type="text/css">
		body {
			background-color: #e1e1e1;
		}

		#sample {
			background-color: #333;
			padding: 20px;
		}
	</style>
</head>
<body>
	<div id="sample">
	  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt odio necessitatibus delectus labore, accusamus, natus nulla perferendis consequatur pariatur error dolore recusandae reprehenderit repellendus iste quos soluta. Alias, nam, in.</p>
	  <p>Excepturi eos aliquam nostrum, officia rerum sed optio atque libero, explicabo odit ab accusamus, error minus id aperiam sunt officiis deserunt perspiciatis, molestias repellat iusto architecto eum! Culpa, eveniet amet.</p>
	  <p>Voluptatem cum quidem, quia quam sit pariatur dignissimos officia veritatis quibusdam eaque impedit est, hic consectetur tempora asperiores illum deleniti quis, voluptatum, sint voluptates nobis sunt unde quo! Vero, laudantium.</p>
	  <p>Facere vero est necessitatibus quibusdam dolor blanditiis iusto ducimus deserunt, pariatur sapiente dolore maxime inventore, illum modi, rem quas rerum hic. Eos numquam fugit necessitatibus ab est ipsa deserunt esse.</p>
	  <p>Delectus totam nemo modi ratione commodi ullam, temporibus mollitia itaque, autem optio possimus sint qui recusandae, sed cupiditate atque fugiat repellendus in, accusamus beatae dignissimos. Amet assumenda, a ipsam suscipit.</p>
	  <p>Nesciunt ipsa id, molestias sapiente, inventore illo illum distinctio iste ullam error quam quo dolorem minima perferendis voluptatem laudantium impedit asperiores consequatur, dolorum non consequuntur facilis ex voluptatibus provident. Doloribus.</p>
	  <p>Corrupti magnam nemo repellendus non! Dolores optio consequuntur eius atque illum dolorem molestias? Dolor nisi laborum provident alias dolore? Sequi rerum aperiam accusamus dignissimos accusantium, suscipit eos cupiditate impedit voluptatibus!</p>
	  <p>Maiores deleniti, omnis id repudiandae. Ducimus nisi veritatis voluptates ex adipisci et optio, voluptatum porro sapiente! Repellat sapiente, aut minima, neque, tempora dicta distinctio veniam, maiores eveniet rerum in quisquam.</p>
	  <p>Illum et doloribus quis in rerum blanditiis, ducimus illo facere qui necessitatibus totam excepturi nemo ipsa magni beatae itaque cupiditate, nam, fuga, tenetur. Harum delectus unde est quasi in numquam?</p>
	  <p>Voluptate necessitatibus eum blanditiis, odit voluptatibus architecto, voluptatum deserunt expedita fuga officiis similique repellat ab pariatur doloribus consequatur, eligendi fugiat illum nam. Nisi corporis error repellendus distinctio nemo, vitae rem?</p>
	</div>

	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery.mCustomScrollbar.concat.min.js"></script>
	<script type="text/javascript">
		
	</script>
</body>
</html>

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

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

(function($){
        $("#sample").mCustomScrollbar({
        	setHeight: 500,
        	setWidth: 500
        });
})(jQuery);

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

(function($){
        $("#sample").mCustomScrollbar({
        	setHeight: 500,
        	setWidth: 500,
        	theme: "rounded-dots",
        	autoHideScrollbar: false,
        	autoExpandScrollbar: true,
        	mouseWheel: {
        		enable: true
        	},
        	scrollButtons: {
        		enable: true
        	},
        	keyboard: {
        		enable: true
        	},
        	contentTouchScroll: 25
        });
})(jQuery);
  •  theme : با استفاده از این ویژگی میتونین ظاهر مورد نظرتون رو انتخاب کنید. لیست کامل تم‌ها رو در این صفحه میتونین ببینید.
  • autoHideScrollbar : اگر true باشه اسکرولبار مخفی هست و هر زمان که ماوس روی المنت بره ، ظاهر میشه
  • autoExpandScrollbar : اگر true باشه زمانی که روی اسکرولبار هاور کنید ، عرض اون بزرگتر میشه
  • mouseWheel : اگر این خاصیت رو فعال کنید ، با استفاده از Mouse Wheel که که بین دو کلیک راست و چپ هست ، میتونین اسکرول کنید. برای فعال کردن بصورت زیر عمل کنید :
    mouseWheel: {
    	enable: true
    }
  • scrollButtons : اگر true قرار بدین ، دکمه‌های بالا و پایین اضافه میشه ، بصورت زیر : scroll1
  • keyboard : اگر true قرار بدین ، با استفاده از کلیدهای بالا و پایین و راست و چپ و Pade Down و Page Up میتونین اسکرول کنید
  • contentTouchScroll : با استفاده از این ویژگی میتونین خاصیت Touch رو برای وسایلی که لمسی هستند فعال کنید

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

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

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

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

نظرات کاربران

galboy

سلام خسته نباشید.
چطور با این کتابخانه اسکرول بار کل سایت رو تغییر بدیم ؟
تشکر

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

فک کنم باید تنظیمات رو برای المنت Body قرار بدین….
موفق باشید

Pouriya Ariyafar

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

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

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

Pouriya Ariyafar

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

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

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

Pouriya Ariyafar

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

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

 (function($){
  $(window).load(function(){
   $(&#8220;.content-wrp&#8221;).mCustomScrollbar({
    setHeight: 700,
    setWidth: 500,
    theme: &#8220;rounded-dots-dark&#8221;,
    autoHideScrollbar: false,
    autoExpandScrollbar: true,
    scrollButtons: {
     enable: true
    },
    keyboard: {
     enable: true
    },
    contentTouchScroll: 25
   });
  });
 })(jQuery);
محمد اسفندیاری

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

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

نمیدونم چرا ولی دو تا تگ 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);

Pouriya Ariyafar

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

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

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

Pouriya Ariyafar

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

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

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

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

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

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

محمد

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

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

برید اینجا
https://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/
توضیح داده چطوری آخرین مطالب رو دریافت کنید

محمد

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

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

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

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

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

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :