آموزش ساخت اسکرول زیبا به کمک جی کوئری

[rezakianoosh 1795]

برخی موارد در طراحی به دلایلی نیاز است تا بخشی از محتوی اسکرول داشته باشد . حال اگر بخواهیم از اسکرول توسط css استفاده کنیم و به overflow ها اسکرول بدهیم مرورگر از اسکرول نه چندان زیبایی برای نمایش ادامه ی محتوی استفاده می کند . بهترین راه برای این شرایط استفاده از پلاگین جی کوئری Nano scroller js Master می باشد این پلاگین اسکرولی بسیار زیبا شبیه اسکرول قسمت چت در فیسبوک ایجاد می کند و باعث زیباتر شدن کار می شود .برای استفاده از این اسکرول طبق موارد زیر عمل می کنیم .

۱- ابتدا ساختار زیر را ایجاد می کنیم و محتوی مورد نظرمان را در قسمت content here قرار می دهیم .

  <div id="about" class="nano" >
<div class="content"> ... content here ...  </div>
</div>

2- فایل css مربوط به پلاگین را فراخوانی می کنیم .

<link rel="stylesheet" href="nanoscroller.css">

nanoscroller.css استایل پیشفرض پلاگین می باشد و شما می توانید با تغییر این استایل طول و عرض را تغییر دهید و به ساختار مورد نظر تان برسید . به عنوان مثال :

.nano { background: #bba; width: 500px; height: 500px; }
.nano .content { padding: 10px; }
.nano .pane   { background: #888; }
.nano .slider { background: #111; }

۳ – نوبت به فراخوانی کتابخانه و پلاگین جی کوئری و تابع مورد نیاز می رسد .

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.nanoscroller.js"></script>
<script type="text/javascript">

$(function(){

  $('.nano').nanoScroller({
    preventPageScrolling: true
  });

});
</script>

تقریبا کار تمام است و حالا می توانیم با استفاده از توابع زیر حالت مورد نیاز خود را به پلاگین اعمال کنیم . توابعی که معرفی می کنیم را باید با تابع موجود در script خط اخر جایگزین کنید .

اسکرول به بالا

$(".nano").nanoScroller({ scroll: 'top' });

اسکرول رو به پایین

$(".nano").nanoScroller({ scroll: 'bottom' });

اسکرول تا رسیدن به یک المان

$(".nano").nanoScroller({ scrollTo: $('#a_node') });

پیش نمایش پلاگین

دانلود پلاگین جی کوئری نانو اسکرول با حجم ۱۵۵ کیلوبایت

منبع : آرتاباز - پلاگین اسکرول با جی کوئری