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

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.

 

Ngoài jQuery, tác giả sử dụng jQuery UI và Brandon 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.8 và Brandon 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.

 

1.<script type="text/javascript" src="/js/jquery.min.js"></script>

2.<script src="/js/jquery-ui.min.js"></script>

3.<script type="text/javascript" src="/js/jquery.mousewheel.min.js"></script>

Mã CSS và HTML như sau

1.#outer_container{margin:60px; width:260px; padding:0 10px; border-top:1px solid #666; border-bottom:1px solid #666;}

2.#customScrollBox{position:relative; height:600px; overflow:hidden;}

3.#customScrollBox .container{position:relative; width:240px; top:0; float:left;}

4.#customScrollBox .content{clear:both;}

5.#customScrollBox .content p{padding:10px 5px; margin:10px 0; color:#fff; font-family:Verdana, Geneva, sans-serif; font-size:13px;}

6.#customScrollBox img{border:5px solid #fff;}

7.#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;}

8.#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;}

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

 

01.<div id="outer_container">

02.<div id="customScrollBox">

03.<div class="container">

04.<div class="content">

05.Nội dung bài viết ở đây

06.</div>

07.</div>

08.<div id="dragger_container">

09.<div id="dragger">▒</div>

10.</div>

11.</div>

12.</div>

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

 

01.$(window).load(function() {

02.visibleHeight=$('#customScrollBox').height();

03.if($('#customScrollBox  .container').height()>visibleHeight){

04.totalContent=$('#customScrollBox  .content').height();

05.minDraggerHeight=$('#dragger').height();

06.draggerContainerHeight=$('#dragger_container').height();

07.adjDraggerHeight=totalContent-((totalContent-visibleHeight)*1.3); //adjust dragger height analogous to content

08.if(adjDraggerHeight>minDraggerHeight){ //minimum dragger height

09.$('#dragger').css('height',adjDraggerHeight+'px');

10.$('#dragger').css('line-height',adjDraggerHeight+'px');

11.} else {

12.$('#dragger').css('height',minDraggerHeight+'px');

13.$('#dragger').css('line-height',minDraggerHeight+'px');

14.}

15.if(adjDraggerHeight<$('#dragger_container').height()){

16.$('#dragger').css('top',mouseCoord);

17.Scroll();

18.} else {

19.$('#dragger').css('top',$('#dragger_container').height()-$('#dragger').height());

20.Scroll();

21.}

22.});

23.//mousewheel

24.$(function($) {

25.$('#customScrollBox').bind('mousewheel', function(event, delta) {

26.vel = Math.abs(delta*10);

27.$('#dragger').css('top', $('#dragger').position().top-(delta*vel));

28.Scroll();

29.if($('#dragger').position().top<0){

30.$('#dragger').css('top', 0);

31.$('#customScrollBox .container').stop();

32.Scroll();

33.}

34.if($('#dragger').position().top>$('#dragger_container').height()-$('#dragger').height()){

35.$('#dragger').css('top', $('#dragger_container').height()-$('#dragger').height());

36.$('#customScrollBox .container').stop();

37.Scroll();

38.}

39.return false;

40.});

41.});

42.function Scroll(){

43.var scrollAmount=(totalContent-(visibleHeight/bottomSpace))/(draggerContainerHeight-draggerHeight);

44.var draggerY=$('#dragger').position().top;

45.targY=-draggerY*scrollAmount;

46.var thePos=$('#customScrollBox  .container').position().top-targY;

47.$('#customScrollBox .container').css('top',$('#customScrollBox  .container').position().top-thePos+'px'); //no easing

48.}

49.$("#dragger").mouseup(function(){

50.DraggerOut();

51.}).mousedown(function(){

52.DraggerOver();

53.});

54.function DraggerOver(){

55.$('#dragger').css('background-color', '#ccc');

56.$('#dragger').css('color', '#666');

57.$('#dragger').css('border-left-color', '#fff');

58.$('#dragger').css('border-right-color', '#555');

59.}

60.function DraggerOut(){

61.$('#dragger').css('background-color', '#999');

62.$('#dragger').css('color', '#666');

63.$('#dragger').css('border-left-color', '#ccc');

64.$('#dragger').css('border-right-color', '#555');

65.}

66.} else {

67.$('#dragger').css('display','none');

68.$('#dragger_container').css('display','none');

69.}

70.});

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