jScrollPane - jQuery Scrollbar như facebook

jScrollPane - jQuery Scrollbar like facebook.
Cũng khá lâu rồi, hôm nay mới rãnh ngồi chia sẻ với các bạn. Bài viết này s cùng các bạn tạo ra một scrollpanel với thanh scrollbar tương tự như facebook. Tuy không mới mẻ gì nhưng đây lại là một cách khiến cho website của chúng ta trông thoáng gọn và mượt mà hơn hẳn. Không tin bạn cứ thử một lần rồi sẽ thích ^^ !!

#bl1 Với bài viết này chúng ta sẽ ứng dụng chủ yếu là jQuery và CSS để tạo ra một thanh scrollbar giống như facebook hoặc hơn nữa là như ý bạn muốn. Bài viết này s sử dụng jScrollpane plugin của Kelvin Luck và edit lại một tí. Thui không nhiều chuyện nữa, chúng ta bắt đầu nhé!

Xem DEMO

#bllink

#bl2 Công việc đầu tiên là chúng ta hãy nhúng vào các thư viện javascript cần thiết trong header. Bạn có thể download tại đây: jScrollPane GitHub #bllink

<!-- styles needed by jScrollPane -->
 <link type="text/css" href="jquery.jscrollpane.css" rel="stylesheet" media="all">
 <!-- latest jQuery direct from google's CDN -->
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <!-- the mousewheel plugin - optional to provide mousewheel support -->
 <script type="text/javascript" src="jquery.mousewheel.js"></script>
 <!-- the jScrollPane script -->
 <script type="text/javascript" src="jquery.jscrollpane.min.js"></script>

#bl2 Tiếp theo, đây là CSS style cho vùng chứa văn bản và thanh scrollbar của bạn.

<style type="text/css">
.content-area{
 height:300px;
}
.jspVerticalBar {
 width: 10px;
 background: transparent;
 right:0px;
}

.jspHorizontalBar {
 bottom: 5px;
 width: 100%;
 height: 8px;
 background: transparent;
}
.jspTrack {
 background: transparent;
 width: 10px;
}
.jspTrackHover {
 background-color: rgba(0, 0, 0, .15);
 -webkit-border-radius: 8px; 
}
.jspDrag {
 background: url(jScrollPane_files/transparent-black.png) repeat;
        background-color: #AAA;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 -webkit-transition: width 250ms;
 width: 5px;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar  {
 float: left;
 height: 100%;
}
.jspDrag {
 float: right;
}
.jspCorner {
 display:none
}
 </style>

#bl2 Tiếp theo, đây là một ít jQuery xử lý ẩn hiện thanh cuộn của chúng ta thôi.

$(document).ready(function(){

 $('.content-area').jScrollPane({
 horizontalGutter:5,
 verticalGutter:5,
 'showArrows': false
 });

 $('.jspDrag').hide();
 $('.content-area').mouseenter(function(){
  $('.jspDrag').stop(true, true).fadeIn(0);   
 });
 $('.content-area').mouseleave(function(){
  $('.jspDrag').stop(true, true).fadeOut('slow');
 });
 
 $('.jspTrack').mouseenter(function(){
  $('.jspTrack').stop(true, true).addClass('jspTrackHover');
  $('.jspDrag').css("width","10px"); 
 });
 $('.jspTrack').mouseleave(function(){
  $('.jspTrack').stop(true, true).removeClass('jspTrackHover');
  $('.jspDrag').css("width",""); 
 });
 
});

#bl2 Và cuối cùng không gì khác hơn là vùng văn bản của chúng ta được chứa trong thẻ <div> với class được sẽ được sử dụng trong đoạn code phía trên.

<div class="content-area">
  Nội dung ở đây...Nhớ là dài dài nhé!!
</div>

#bl1 Bạn có thể tham khảo trang chủ để có thêm nhiều tùy chọn: Click here!! #bllink

Cùng wWw.blogit.info chia sẻ Thế giới công nghệ 4 sao

SHARE