آموزش طراحی وب – پلاگین nanoScroller.js

با سلام امروز دوباره میخوایم یک افزونه خوب جی کوئری رو بهتون معرفی کنیم پلاگین nanoScroller.js این پلاگین خیلی راحت به شما قابلیت اسکرول در دیو هایی که در صفحه ایجاد میکنید رو میده و در زمانی که متن های خیلی بلندی دارید میتونید از این افزونه استفاده کنید.

استفاده

1-کافیه اول این دایو با این کلاس هارو ایجاد کنید میتونید همین رو کپی کنید.
<div id="about" class="nano">
    <div class="nano-content"> ... content here ...  </div>
</div>
2- و بعد از این کد هارو در فایل سی اس اس پروژتون اضافه کنید .
/** initial setup **/
.nano {
  position : relative;
  width    : 100%;
  height   : 100%;
  overflow : hidden;
}
.nano > .nano-content {
  position      : absolute;
  overflow      : scroll;
  overflow-x    : hidden;
  top           : 0;
  right         : 0;
  bottom        : 0;
  left          : 0;
}
.nano > .nano-content:focus {
  outline: thin dotted;
}
.has-scrollbar > .nano-content::-webkit-scrollbar {
  display: block;
  background : #000;
  border-radius: 5px;
  position   : absolute;
  width      : 10px;
  right      : 0;
  top        : 0;
  bottom     : 0;
}
.nano > .nano-pane {
  background : #000;
  position   : absolute;
  width      : 10px;
  right      : 0;
  top        : 0;
  bottom     : 0;
  visibility : hidden\9; /* Target only IE7 and IE8 with this hack */
  opacity    : .01;
  -webkit-transition    : .2s;
  -moz-transition       : .2s;
  -o-transition         : .2s;
  transition            : .2s;
  -moz-border-radius    : 5px;
  -webkit-border-radius : 5px;
  border-radius         : 5px;
}
.nano > .nano-pane > .nano-slider {
  background: #000;
  background: rgba(0,0,0,.5);
  position              : relative;
  margin                : 0 1px;
  -moz-border-radius    : 3px;
  -webkit-border-radius : 3px;
  border-radius         : 3px;
}
.nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed {
  visibility : visible\9; /* Target only IE7 and IE8 with this hack */
  opacity    : 0.99;
}
.nano { background: #ccc; width: 500px; height: 500px; }
.nano .nano-content { padding: 10px; }
/*.nano .nano-pane   { background: #888; }
.nano .nano-slider { background: #111; }*/
3-و در نهایت این کد جاوا اسکریپت رو بعد از body پروژتون بگذارید .
$(".nano").nanoScroller();

پیش نمایش

See the Pen QPvGXa by amir (@webquery) on CodePen.

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *