Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Web Design
  2. CSS
Webdesign

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

by
Length:LongLanguages:

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.

Web component services on Envato Studio

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:

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:

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.

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:

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:

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:

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):

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

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.

Fancy Scrollbar - WordPress
Fancy Scrollbar - WordPress

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.

Awesome Custom Scrollbar
Awesome Custom Scrollbar

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.

DZS Scroller
DZS Scroller

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.

CSS3 Scrollbar Styles
CSS3 Scrollbar
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.