Mẹo nhỏ: Trang trí Scrollbar để phù hợp với Thiết kế UI của bạn

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Bài này sẽ hướng dẫn cho bạn cách cải thiện giao diện của scrollbar để phù hợp với thiết kế giao diện người dùng của bạn. Chúng ta sẽ tìm hiểu những gì mà các trình duyệt WebKit cung cấp cho chúng ta liên quan đến CSS, cùng với đó chúng ta sẽ sử dụng một jQuery dự phòng để phục vụ cho các trình duyệt khác.

Tìm kiếm một cách nhanh hơn?

Nếu bạn cần sự giúp đỡ trong việc trang trí một thành phần nào đó của trang web, thì bạn có thể thực hiện nhanh hơn khi có được sự giúp đỡ từ một chuyên gia. Envato có các chuyên gia sẵn sàng để giúp trang trí lại hoặc tùy biến tất cả các kiểu của các thành phần của web.

Lưu ý nhanh về Trình duyệt

Khi chúng ta đề cập đến các trình duyệt dựa trên Webkit chúng ta chủ yếu nói về Apple Safari và Google Chrome. Cùng với nhau, chúng hiện đang chiếm hơn 40% thị phần trình duyệt desktop nói chung. Đối với máy tính bảng, iPad của Apple sẽ luôn luôn sử dụng Webkit bất kể trình duyệt của công ty nào được sử dụng. Google cũng bổ sung Chrome vào hệ điều hành Android của họ và Chromebook thì tất nhiên dựa trên Google Chrome.

Nhìn vào những con số này có thể thấy có một tương lai rất tươi sáng cho việc trang trí scrollbar!

Bước 1: Một Trang đơn giản với Scrollbar

Trước khi chúng ta có thể bắt đầu với chủ đề thật sự trong việc trang trí scrollbar với CSS, chúng ta cần một bản demo đang hoạt động; một trang với scrollbar. Scrollbar có thể được nhìn thấy nếu:

Nội dung lớn hơn diện tích của cửa sổ nhìn thấy (một scrollbar sẽ xuất hiện ở bên phải).
Một textarea có đủ văn bản để scrollbar xuất hiện.
Một iframe được sử dụng để hiển thị một trang khác.
Một div hay bất kỳ phần tử khối nào khác đã thiết lập thuộc tính overflow của nó.

Đối với bản demo này, chúng ta sẽ chọn cái cuối cùng. Dưới đây là markup ban đầu của tôi:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. In hac habitasse platea dictumst. In at felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, a aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.

Praesent sodales, sapien sit amet congue egestas, sem ligula ornare massa, vitae suscipit felis ligula quis velit. Phasellus lectus massa, sodales ac vulputate ac, pharetra quis lacus. Morbi tempus pretium nisi sed pretium. Pellentesque dictum volutpat vulputate. Fusce dapibus sagittis felis, ut consequat nisi posuere id. Cras elit orci, vehicula in sagittis a, faucibus vitae dui. Nunc non lorem in metus adipiscing adipiscing non a sapien. Sed dictum ultrices nibh in tristique. Nulla dapibus laoreet tincidunt. Sed accumsan erat quis mi luctus porta.

Sed mollis justo enim, ut pharetra nunc. Fusce vehicula viverra magna, et fringilla lectus porta quis. Donec eu fermentum mi. Donec congue pellentesque iaculis. Phasellus est leo, cursus eget consectetur in, tristique sit amet tortor. Cras eleifend felis sit amet eros vehicula aliquet. Pellentesque fringilla metus in libero luctus eu condimentum nulla pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat sodales lorem, nec dignissim turpis pharetra et. Nullam commodo hendrerit elementum. Donec porta faucibus ligula non blandit. In ultrices vehicula pretium.

Sed ac sagittis sapien. Curabitur varius pellentesque nunc eget molestie. Vivamus in massa arcu, ut auctor tellus. Aliquam convallis lobortis magna, ut posuere odio euismod ac. Vestibulum in enim vitae metus vulputate interdum. Mauris a risus auctor nunc fermentum dapibus. Proin iaculis, nunc ut viverra varius, augue augue porta libero, id viverra nisl elit in mauris. Aenean quis risus ante. Donec bibendum erat a sem vestibulum eu aliquet lectus tincidunt. Vivamus imperdiet congue leo, non ultricies urna sodales sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vitae rhoncus dui. Nunc in nisi in ante imperdiet tincidunt sagittis eu ipsum. Aenean orci justo, faucibus placerat tincidunt vitae, vehicula at libero.

</div>

Nó chỉ là một div với nhiều nội dung mẫu. Và đây là CSS ban đầu, trong đó thiết lập một số kích thước cố định và hiển thị cả scrollbar ngang và dọc:

  .container {
		  width: 400px;
		  height: 300px;
		  background-color: #DCDCDC;
		  overflow: scroll; /* showing scrollbars */
	}

Bạn sẽ thấy một cái gì đó tương tự như sau:

Bước 2: Bắt đầu với Trình duyệt Webkit

Lật lại quá khứ (cách đây vài năm) các phần tử giả CSS đã được giới thiệu trong các trình duyệt Webkit để nhắm chọn scrollbar, giúp trang trí trang web theo theme của bạn.

Hãy trang trí một cái gì đó, sử dụng tiền tố -webkit- và các thuộc tính tùy biến của scrollbar trong webkit. Hãy nhớ rằng tôi chỉ sử dụng các thuộc tính CSS cơ bản để cho dễ hiểu, với chú thích trong các dòng comment.

	::-webkit-scrollbar {
		  width: 15px;
	} /* this targets the default scrollbar (compulsory) */

Với sự có mặt của phần tử giả này, WebKit sẽ tắt scrollbar tích hợp của nó và chỉ sử dụng các thông tin được cung cấp trong CSS. - Surfin' Safari

Và bây giờ đối với một số phần tử giả khác:

	::-webkit-scrollbar-track {
		  background-color: #b46868;
	} /* the new scrollbar will have a flat appearance with the set background color */

	::-webkit-scrollbar-thumb {
		  background-color: rgba(0, 0, 0, 0.2); 
	} /* this will style the thumb, ignoring the track */

	::-webkit-scrollbar-button {
		  background-color: #7c2929;
	} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

	::-webkit-scrollbar-corner {
		  background-color: black;
	} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */

Sau khi thêm CSS này bạn có thể thấy hiệu ứng sau (một lần nữa, chỉ trong trình duyệt Webkit).

Đoán được không? Internet Explorer có kiểu dáng Scrollbar của riêng nó!

Điều đó đúng - trong thực tế, IE là trình duyệt đầu tiên hỗ trợ kiểu dáng của scrollbar thông qua CSS. Điều này đã trở lại trong phiên IE 5.5, nhưng chỉ có màu sắc là có thể được thay đổi.

Các thuộc tính này vẫn có thể được sử dụng ngày nay; hãy nhìn vào thuộc tính này trên IE 9 để hình dung:

  body {
      scrollbar-face-color: #b46868;
  }

Hãy xem nó sẽ trông như thế nào:

Bước 3: Dự phòng cho các Trình duyệt không phải là Webkit

Đã đủ cho WebKit. Firefox, IE và Opera cũng có thể tham gia cuộc vui. Đối với chúng, chúng ta có một cách tiếp cận dự phòng trong hình thức của JScrollPane. Plugin jQuery này được phát triển bởi Kelvin Luck và nó sẽ là vị cứu tinh của chúng ta.

Trang web của Kelvin có rất nhiều ví dụ hay, nhưng để sử dụng cơ bản tất cả những gì chúng ta cần phải làm là tải tập tin jQuery và JScrollPane và cài đặt chúng theo cách sau:

	<!-- this cssfile can be found in the jScrollPane package -->
	<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />

	<!-- 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 jScrollPane script -->
	<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>

	<!--instantiate after some browser sniffing to rule out webkit browsers-->
	<script type="text/javascript">
	
	  $(document).ready(function () {
	      if (!$.browser.webkit) {
	          $('.container').jScrollPane();
	      }
	  });
	
	</script>
				
</body>

Chỉ với mục đích làm cho phù hợp với theme của chúng ta, chúng ta hãy mở jquery.jscrollpane.css và chỉnh sửa các dòng sau đây với các giá trị màu của chúng ta (để cải thiện hiệu năng bạn có thể cần đặt tất cả các phong cách trong các tập tin của riêng bạn):

	.jspTrack
	{
		background: #b46868; /* changed from #dde */
		position: relative;
	}

	.jspDrag
	{
		background: rgba(0,0,0,0.2); /* changed from #bbd */
		position: relative;
		top: 0;
		left: 0;
		cursor: pointer;
	}

Dưới đây là một ảnh chụp màn hình về những gì bạn sẽ thấy trong Firefox:

Tóm tắt

Các ứng dụng web như Gmail và Google+ (cùng với nhiều ví dụ khác) đã hấp thu ý tưởng và nếu đà này cứ tiếp tục, có lẽ Firefox và IE cũng sẽ cung cấp các giải pháp riêng của họ.

Tôi hy vọng bạn thích Mẹo nhỏ này và tôi mong muốn được nhìn thấy những gì bạn làm với scrollbar trong công việc thiết kế của bạn!

Tìm hiểu thêm

Tuỳ biến Scrollbar trong WebKit bởi Chris Coyier
Trang trí Scrollbar trên webkit.org

Các Scrollar Có thể Tùy biến trên Envato Market

Nếu bạn đang tìm kiếm một giải pháp làm sẵn, Envato Market cung cấp một sự lựa chọn các scrollbar mà bạn có thể cắm vào website của bạn để đạt được một loạt các hiệu ứng. Dưới đây là một số chúng:

1. Lazybars - Plugin jQuery cho Scrollbar đáp ứng có thể chỉnh theme

Lazybars là một plugin jQuery dễ sử dụng, có thể đổi theme của scrollbar. Bạn có thể cài đặt các scrollbar chỉ bằng cách thêm tên lớp vào bất kỳ phần tử có thể cuộn trên trang web của bạn.

Sử dụng các theme đi kèm với Lazybars, hoặc tạo của riêng bạn với một số CSS đơn giản.

Lazybars - Themeable responsive scrollbar jQuery plugin — Lazybars - Plugin jQuery cho Scrollbar đáp ứng có thể chỉnh theme

2. Fancy Scrollbar - WordPress

"Fancy Scrollbar - WordPress" là một plugin có thể tạo ra một scrollbar tùy biến trên trang web WordPress. Nó có rất nhiều lựa chọn tùy biến. Bạn có thể tùy biến màu sắc, hiệu ứng, độ trễ cuộn, thanh cuộn, và nhiều tham số khác nữa.

3. Awesome Custom Scrollbar

Awesome Custom Scrollbar là một plugin jQuery dành cho scrollbar có khả năng tuỳ biến cao trong trang web WordPress của bạn. Với plugin này, bạn có thể tùy biến scrollbar bên trong trang web của bạn, và bạn có thể nhúng nó thông qua shortcode ở bất cứ nơi nào bạn muốn, thậm chí trong các tập tin của theme.

4. DZS Scroller

DZS Scroller cung cấp một scrollbar cho trang web của bạn mà bạn có thể tùy biến một cách dễ dàng thông qua CSS nếu ba kiểu scrollbar đi kèm không đủ cho bạn. Nó cũng đi kèm với các tính năng nâng cao như cuộn bằng cách di chuyển chuột hoặc mờ đi khi di chuyển chuột ra khỏi scrollbar. Và nó hoạt động trên iPhone/iPad.

5. CSS3 Scrollbar

Thật dễ dàng để sử dụng CSS3 Scrollbar tuyệt đẹp và đầy màu sắc cho trang web của bạn. Đơn giản chỉ cần thêm vào tập tin CSS hiện có và tận hưởng CSS3 Scrollbar mới.