"Tùy biến thanh cuộn (scrollbar) với JQuery"

Traidatmui.com – Thông thường để trình bày một nội dung có độ dài khá dài trên web/blog thì chúng ta hay sử dụng hiệu ứng cuộn cho nội dung đó để không phải dàn trang ra quá dài. Vâng khi bạn cho nội dung cuộn với một độ rộng và chiều cao nhất định nó sẽ xuất hiện 2 thanh cuộn đó là thanh cuộn ngang (Horizontal scrollbar)và thanh cuộn dọc (Vertical scrollbar) để người dùng kéo lên xuống hay qua lại để xem nội dung. Và bây giờ bạn thấy thanh cuộn đó quá đơn giản, thấy nhàm chán và muốn thay đổi nó thì bài viết này mình chia sẻ cùng các bạn cách thay đổi nó. Ở đây mình chia sẻ 3 style cho bạn, bạn có thể xem demo để thấy rỏ hơn.

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<style type='text/css'>
/* content block 1 */
#mcs_container{ clear:both; margin:0 0 0 0px; width:260px; height:600px; padding:0 10px; border-top:1px solid #333; border-bottom:1px solid #333;}
#mcs_container .customScrollBox{position:relative; height:100%; overflow:hidden;}
#mcs_container .customScrollBox .container{position:relative; width:240px; top:0; float:left;}
#mcs_container .customScrollBox .content{clear:both;}
#mcs_container .customScrollBox .content p{padding:0 5px; margin:10px 0; color:#fff; font-family:Verdana, Geneva, sans-serif; font-size:13px; line-height:20px;}
#mcs_container .customScrollBox .content p.alt{padding:10px 5px; margin:10px 0; color:#fff; font-family:Georgia, &quot;Times New Roman&quot;, Times, serif; font-size:17px; line-height:19px; color:#999;}
#mcs_container .customScrollBox img{border:5px solid #fff;}
#mcs_container .dragger_container{position:relative; width:2px; height:525px; float:left; margin:40px 0 0 10px; background:#000; cursor:pointer -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; cursor:s-resize;}
#mcs_container .dragger{position:absolute; width:2px; height:60px; background:#999; text-align:center; line-height:60px; color:#666; overflow:hidden; cursor:pointer; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px;}
#mcs_container .dragger_pressed{position:absolute; width:4px; margin-left:-1px; height:60px; background:#999; text-align:center; line-height:60px; color:#666; overflow:hidden; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; cursor:s-resize;}
#mcs_container .scrollUpBtn,#mcs_container .scrollDownBtn{position:absolute; display:inline-block; width:14px; height:15px; margin-right:12px; text-decoration:none; right:0; filter:alpha(opacity=20); -moz-opacity:0.20; -khtml-opacity:0.20; opacity:0.20;}
#mcs_container .scrollUpBtn{top:16px; background:url(https://lh6.googleusercontent.com/-xsczTAr5f_8/TlcYH2p_dmI/AAAAAAAAAuQ/xjg4czun4MU/mcs_btnUp.png) center center no-repeat;}
#mcs_container .scrollDownBtn{bottom:12px; background:url(https://lh4.googleusercontent.com/-pDCA0YLCT7o/TlcYH7M1GoI/AAAAAAAAAuQ/OKS-q2zst0Q/mcs_btnDown.png) center center no-repeat;}
#mcs_container .scrollUpBtn:hover,#mcs_container .scrollDownBtn:hover{filter:alpha(opacity=60); -moz-opacity:0.60; -khtml-opacity:0.60; opacity:0.60;}

/* content block 2 */
#mcs2_container{position:relative; clear:both; margin:0; width:260px; height:500px; padding:0 10px; }
#mcs2_container .customScrollBox{position:relative; height:100%; overflow:hidden;}
#mcs2_container .customScrollBox .container{position:relative; width:240px; top:0; float:left;}
#mcs2_container .customScrollBox .content{clear:both;}
#mcs2_container .customScrollBox .content p{padding:10px 5px; margin:10px 0; color:#fff; font-family:Verdana, Geneva, sans-serif; font-size:13px; line-height:20px;}
#mcs2_container .customScrollBox .content p.alt{padding:10px 5px; margin:10px 0; color:#fff; font-family:Georgia, &quot;Times New Roman&quot;, Times, serif; font-size:17px; line-height:19px; color:#999;}
#mcs2_container .customScrollBox img{border:5px solid #fff;}
#mcs2_container .dragger_container{position:relative; width:9px; height:480px; float:left; margin:10px 0 0 10px; cursor:pointer; box-shadow:inset 0 0 10px #000; -moz-box-shadow:inset 0 0 10px #000; -webkit-box-shadow:inset 0 0 10px #000;}
#mcs2_container .dragger{position:absolute; width:6px; height:60px; background:#333; text-align:center; margin-left:1px; line-height:60px; color:#666; overflow:hidden; border-left:1px solid #787878; border-right:1px solid #000; cursor:pointer;}
#mcs2_container .dragger_pressed{position:absolute; width:6px; height:60px; background:#444; text-align:center; margin-left:1px; line-height:60px; color:#777; overflow:hidden; border-left:1px solid #878787; border-right:1px solid #000; cursor:pointer;}

/* content block 3 */
#mcs3_container{clear:both;position:relative; margin:0; width:280px; height:500px; padding:0 10px; border-bottom:1px solid #666; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:#6D5843; box-shadow:inset 0 0 20px #000; -moz-box-shadow:inset 0 0 20px #000; -webkit-box-shadow:inset 0 0 20px #000;}
#mcs3_container .customScrollBox{position:relative; height:100%; overflow:hidden;}
#mcs3_container .customScrollBox .container{position:relative; width:240px; top:0; float:left;}
#mcs3_container .customScrollBox .content{clear:both;}
#mcs3_container .customScrollBox .content p{padding:10px 5px 10px 15px; margin:0; color:#31231E; font-family:Verdana, Geneva, sans-serif; font-size:13px; line-height:20px;}
#mcs3_container .customScrollBox img{border:3px solid #31231E; margin:0 0 0 15px;}
#mcs3_container .dragger_container{position:relative; width:0px; height:33%; float:left; margin:35px 0 0 25px; border-left:1px solid #31231E; border-right:1px solid #8E7757; cursor:pointer}
#mcs3_container .dragger{position:absolute; width:9px; height:60px; background:#31231E; margin-left:-5px; overflow:hidden; cursor:pointer; -moz-border-radius:6px; -khtml-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;}
#mcs3_container .dragger_pressed{position:absolute; width:9px; height:60px; background:#31231E; margin-left:-5px; overflow:hidden; cursor:pointer; -moz-border-radius:6px; -khtml-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;}

</style>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.min.v1.4.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.mousewheel.min.js"></script>

<script>
$(window).load(function() {
mCustomScrollbars();
});

function mCustomScrollbars(){

$("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);
$("#mcs2_container").mCustomScrollbar("vertical",0,"easeOutCirc",1.05,"auto","yes","no",0);
$("#mcs3_container").mCustomScrollbar("vertical",900,"easeOutCirc",1.05,"auto","yes","no",0);
}

/* function to fix the -10000 pixel limit of jquery.animate */
$.fx.prototype.cur = function(){
if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
return this.elem[ this.prop ];
}
var r = parseFloat( jQuery.css( this.elem, this.prop ) );
return typeof r == 'undefined' ? 0 : r;
}

function LoadNewContent(id,file){
$("#"+id+" .customScrollBox .content").load(file,function(){
mCustomScrollbars();
});
}
</script>
<script src="http://data-traidatmui.appspot.com/scripts/jquery-CustomScrollbar.js"></script>

5. Save template lại và trở về phần tử trang (Page Elements)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<div id="mcs_container">
<div class="customScrollBox">
<div class="container">
<div class="content">

{ Nội dung của bạn ở đây }

</div>
</div>
<div class="dragger_container">

<div class="dragger"></div>
</div>
</div>
<a href="#" class="scrollUpBtn"></a> <a href="#" class="scrollDownBtn"></a>
</div>

Ở trên là mình sử dụng style 1, nếu bạn muốn sử dụng Style 2 hoặc Style 3 thì bạn hãy thay id mcs_container thành mcs2_container (Style 2), mcs3_container (Style 3)

Lưu ý: Khi nội dung của bạn có độ dài dài hơn chiều cao của khung chứa nội dung thì thanh cuộn mới xuất hiện. Sau khi bạn chọn một style nào đó thì bạn có thể xóa CSS của các style còn lại.

7. Cuối cùng save tiện ích lại

Chúc bạn thành công

Tham khảo thietkewebpro.vn

Xem khác cùng chủ đề

3 nhận xét | Viết lời bình

2/22/2012 02:16:00 SA Trả lời

Hic, sao e dùng nó cho main-wrapper thì lại không được nhỉ :(, nếu dùng được thì chỉ e cách với, e cám ơn nhiều !!

Admin
2/28/2012 04:28:00 SA Trả lời

@ Tăng Doãn Du: Do id khác nhau nên bạn không thể sử dụng cho main được bạn

7/24/2015 02:18:00 SA Trả lời

Bạn ơi bên mình có dịch vụ Đăng tin tự động lên groups trên facebook miễn phí bạn xem qua nhé. miễn phí 100%
Ngoài ra các bạn có thể đọc tin tức tại Kênh tin tức giải trí yeubao.com
Các bạn có thể truy cập link sau để xem thông tin công nghệ
Khoinguoncongnghe.net | kênh thông tin dành cho tín đồ công nghê
cám ơn bạn đã đọc
đăng tin tự động trên facebook miễn phí 100% xem tại Đăng tin tự động lên groups trên facebook miễn phí
xem thủ thuật blogspot, thủ thuật blogger, thủ thuật facebook tại thủ thuật tổng hợp facebook, blogger,coputuer
xem tin tức giới trẻ, các tin nổi bật tin tức nổi bật, tin sao, tin giới trẻ, đời sống xã hội
xem thong tin giải trí, cung hoàng đạo, tại bí mật 12 chòm sao,tâm sự,blog tâm sự

giải trí thư giã relax giải trí thư giãn relax
khám phá du lịch, bi ẩn khám phá du lịch, bí ẩn
kho video giải trí khổng lồ video đời sống xã hội, video giải trí
khởi nguồn công nghệ, xem tin tức công nghệ, tin tức internet
tin tức internet
Tin tức itc , tin tức technogoy tin tức ict

Khám phá công nghệ
khám phá

Thủ thuật công nghê thủ thuật công nghệ, tips





Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang