تغییر رنگ اسکرول توسط جیکوئری
با سلام خدمت دوستان عزیز. امروز قصد داریم که یک کتابخانه مفید و کاربردی جی کوئری را به شما معرفی کنیم و با یه مثال کاربردی نحوه استفاده از اون را به شما یاد بدیم. برای تغییر رنگ و شکل اسکرول بار می تونید به روش زیر عمل کنید. ابتدا کتابخانه جیکوئری رو باید توی سایتتون فراخونی کنید (مثلا جیکوئری 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 از کلاس و آیدی دلخواهتون استفاده کنید. البته قبل اسم کلاس یک نقطه “.” و برای آیدی هم یک “#” بذارید.