• +84 909 333 021
  • This email address is being protected from spambots. You need JavaScript enabled to view it.

Hướng Dẫn Thiết Kế Website

Tùy biến thanh scroll với jQuery trong thiết kế website

Bạn đánh giá: 0 / 5

Ngôi sao không hiệu lựcNgôi sao không hiệu lựcNgôi sao không hiệu lựcNgôi sao không hiệu lựcNgôi sao không hiệu lực
 

Malihu, admin website manos.malihu.gr giới thiệu tới các bạn đoạn mã jQuery giúp tùy biến thanh scrollbar của trình duyệt. Bạn có thể tạo thanh scrollbar của riêng mình và vẫn có thể hỗ trợ cuộn chuột.

scrollbar custom, thiet ke web 

Ngoài jQuery, tác giả sử dụng jQuery UIBrandon Aaron jquery mousewheel plugin (giúp xử lý việc cuộn chuột). Bạn có thể dễ dàng tùy biến và thiết kế lại thanh scrollbar bằng CSS

Cách sử dụng

Trước tiên bạn cần tải về jQuery 1.4,jQuery UI 1.8Brandon Aaron jquery mousewheel plugin, sau đó thêm vào phần header của trang web. Nhớ thay đổi đường dẫn theo thư mục bạn chứa những file trên.

{codecitation class="brush: html; gutter: true;"}

<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
{/codecitation}

Mã CSS và HTML như sau

{codecitation class="brush: html; gutter: true;"}

#outer_container{margin:60px; width:260px; padding:0 10px; border-top:1px solid #666; border-bottom:1px solid #666;}
#customScrollBox{position:relative; height:600px; overflow:hidden;}
#customScrollBox .container{position:relative; width:240px; top:0; float:left;}
#customScrollBox .content{clear:both;}
#customScrollBox .content p{padding:10px 5px; margin:10px 0; color:#fff; font-family:Verdana, Geneva, sans-serif; font-size:13px;}
#customScrollBox img{border:5px solid #fff;}
#dragger_container{position:relative; width:0px; height:580px; float:left; margin:10px 0 0 10px; border-left:1px solid #000; border-right:1px solid #555;}
#dragger{position:absolute; width:9px; height:40px; background:#999; margin-left:-5px; text-align:center; line-height:40px; color:#666; overflow:hidden; border-left:1px solid #ccc; border-right:1px solid #555;}
{/codecitation}

------------------

{codecitation class="brush: html; gutter: true;"}

<div id="outer_container">
<div id="customScrollBox">
<div class="container">
<div class="content">
Nội dung bài viết ở đây
</div>
</div>
<div id="dragger_container">
<div id="dragger">&#9618;</div>
</div>
</div>
</div>
{/codecitation}

Và toàn bộ mã javascript để xử lý như sau:

{codecitation class="brush: html; gutter: true;"}

$(window).load(function() {
visibleHeight=$('#customScrollBox').height();
if($('#customScrollBox .container').height()>visibleHeight){
totalContent=$('#customScrollBox .content').height();
minDraggerHeight=$('#dragger').height();
draggerContainerHeight=$('#dragger_container').height();
adjDraggerHeight=totalContent-((totalContent-visibleHeight)*1.3); //adjust dragger height analogous to content
if(adjDraggerHeight>minDraggerHeight){ //minimum dragger height
$('#dragger').css('height',adjDraggerHeight+'px');
$('#dragger').css('line-height',adjDraggerHeight+'px');
} else {
$('#dragger').css('height',minDraggerHeight+'px');
$('#dragger').css('line-height',minDraggerHeight+'px');
}
if(adjDraggerHeight<$('#dragger_container').height()){
$('#dragger').css('top',mouseCoord);
Scroll();
} else {
$('#dragger').css('top',$('#dragger_container').height()-$('#dragger').height());
Scroll();
}
});
//mousewheel
$(function($) {
$('#customScrollBox').bind('mousewheel', function(event, delta) {
vel = Math.abs(delta*10);
$('#dragger').css('top', $('#dragger').position().top-(delta*vel));
Scroll();
if($('#dragger').position().top<0){
$('#dragger').css('top', 0);
$('#customScrollBox .container').stop();
Scroll();
}
if($('#dragger').position().top>$('#dragger_container').height()-$('#dragger').height()){
$('#dragger').css('top', $('#dragger_container').height()-$('#dragger').height());
$('#customScrollBox .container').stop();
Scroll();
}
return false;
});
});
function Scroll(){
var scrollAmount=(totalContent-(visibleHeight/bottomSpace))/(draggerContainerHeight-draggerHeight);
var draggerY=$('#dragger').position().top;
targY=-draggerY*scrollAmount;
var thePos=$('#customScrollBox .container').position().top-targY;
$('#customScrollBox .container').css('top',$('#customScrollBox .container').position().top-thePos+'px'); //no easing
}
$("#dragger").mouseup(function(){
DraggerOut();
}).mousedown(function(){
DraggerOver();
});
function DraggerOver(){
$('#dragger').css('background-color', '#ccc');
$('#dragger').css('color', '#666');
$('#dragger').css('border-left-color', '#fff');
$('#dragger').css('border-right-color', '#555');
}
function DraggerOut(){
$('#dragger').css('background-color', '#999');
$('#dragger').css('color', '#666');
$('#dragger').css('border-left-color', '#ccc');
$('#dragger').css('border-right-color', '#555');
}
} else {
$('#dragger').css('display','none');
$('#dragger_container').css('display','none');
}
});

{/codecitation}

Nếu bạn ngại phải đọc & hiểu thì có thể tải về file demo của tác giả và chỉnh sửa lại theo ý của mình.

Demo 1 | Demo 2 | Demo 3 | Download


Monster Design

Chuyên nghiệp và ấn tượng đó là 2 từ mà chúng tôi có thể mô tả về công ty Monster Design. Tôi rất hài lòng với thiết kế và lập trình của Monster Design mang lại cho chúng tôi. Họ luôn sẵn sàng hỗ trợ ngay khi chúng tôi cần, nhưng vấn đề mà tôi luôn ấn tượng hơn hết đó là hiệu quả mà Monster Design đã mang lại cho chúng tôi.

Mr. Jeong Cheol - Giám Đốc Công Ty Cổ Phần Kỹ Thuật & Xây Dựng Handong - Hàn Quốc

Bài viết gần đây

Top từ khóa

No Tags found.