تغییر رنگ اسکرول توسط جیکوئری

تغییر رنگ اسکرول توسط جیکوئری

با سلام خدمت دوستان عزیز. امروز قصد داریم که یک کتابخانه مفید و کاربردی جی کوئری را به شما معرفی کنیم و با یه مثال کاربردی نحوه استفاده از اون را به شما یاد بدیم. برای تغییر رنگ و شکل اسکرول بار می تونید به روش زیر عمل کنید. ابتدا کتابخانه جیکوئری رو باید توی سایتتون فراخونی کنید (مثلا جیکوئری 1.9 ). البته کتابخونه جیکوئری توی اکثر قالب ها و سایت ها وجود داره و یکی از پایه های سایت رو تشکیل می دهد.

ابتدا باید کتابخانه jquery.nicescroll.min.js رو توی سایتتون فراخونی کنید. اکنون کد زیر رو توی فوتر سایتتون قرار بدید و آدرس فایل در سایتتون رو جایگزین آدرس زیر کنید:

<script src="http://snippets.ir/jquery.nicescroll.min.js" type="text/javascript"></script>

حالا کافیه کد زیر رو هم دقیقا زیر کد بالایی بذارید:

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {

	$("html").niceScroll({
		autohidemode: 'false',  //مخفی شدن خودکار
		cursorborderradius: '3px',  //مقدار گرد شدن ابتدا و انتها
		cursorwidth: '7px',       //ضخامت
		cursorcolor: '#085586',   //رنگ اسکرول
		cursorborder:"",            // رنگ بردر
		background: '',              //رنگ زمینه
		scrollspeed:60,         //سرعت
		railalign:"left",         // سمت قرار گیری
		cursoropacitymax:0.7         // شفافیت
	});

});
// ]]></script>

برای شخصی سازی رنگ و ضخامت و بوردر و … هم میتونید همین کد بالا رو تغییر بدید. کد بالا اسکرول تگ html رو تغییر میده که میتونید بجای html از کلاس و آیدی دلخواهتون استفاده کنید. البته قبل اسم کلاس یک نقطه “.” و برای آیدی هم یک “#” بذارید.

دیدگاهتان را بنویسید

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