Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Scrollbar Là Gì Và Cách Tạo Scrollbar Cho Trang Web (2020)

Scrollbar Là Gì Và Cách Tạo Scrollbar Cho Trang Web (2020)


Ngày 15 Tháng 7 Năm 2020

Cách Thiết Kế Và Những Thư Viện Scrollbar Cho Trang Web (2020)

Scollbar là một phần trong trình duyệt giúp chúng ta có thể xem được nội dung khi vượt quá màn hình của trang. Bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu cách thiết kế một scrollbar trong trang web nhé!

Những Nội Dung Cần Nắm Khi Thiết Kế Scrollbar

  • ::-webkit-scrollbar: thanh cuộn trong trang web để thiết lập style.
  • ::-webkit-scrollbar-button: các nút trên thanh cuộn(mũi tên chỉ lên và chỉ xuống).
  • ::-webkit-scrollbar-thumb: có thể thay đổi kích cỡ phần tử cuộn.
  • ::-webkit-scrollbar-track: khoảng trống nằm bên dưới track (thanh tiến trình) của scrollbar.
  • ::-webkit-scrollbar-track-piece: phần trên cùng của thanh tiến trình không bị che bởi thumb.
  • ::-webkit-scrollbar-corner: góc dưới cùng của thanh cuộn, nơi mà hai scrollbar ngang và dọc gặp nhau.
  • ::-webkit-resize: chỉnh sửa lại kích thước có thể kéo được xuất hiện phía trên thanh cuộn ở góc dưới cùng của một số phần tử.

Mình có một lưu ý nhỏ là các thuộc tính trên thì có thể sử dụng được trên trình duyệt là Chrome, Edge, Safari. Còn đối với trình duyệt Firefox thì chúng ta sử dụng các CSS Scrollbars API như là scrollbar-color, scrollbar-width... Cái này mình sẽ nói rõ hơn ở các ví dụ bên dưới nhé!

Xây Dựng Và Thiết Kế Scrollbar

Bây giờ chúng ta sẽ đi vào thiết lập Scrollbar cho trang Web Bằng CSS nhé:

/* Xác định độ rộng cho scrollbar*/
::-webkit-scrollbar {
width: 8px;
}
/* Thiết lập màu nền xám cho Track (Thanh Tiến Trình)*/
::-webkit-scrollbar-track {
background: LightGray;
}
/* chọn màu nền xanh cho thumb */
::-webkit-scrollbar-thumb {
background: DodgerBlue;
}
/* tao hiều ứng thay đổi màu nền đỏ khi hover */
::-webkit-scrollbar-thumb:hover {
background: Tomato;
}

Và dưới đây là kết quả nha:

See the Pen Ví Dụ Scrollbar by haycuoilennao19 (@haycuoilennao19) on CodePen.

Xây Dựng Và Thiết Kế Scrollbar Cho Firefox

Để thiết kế lại scrollbar mặc định trên trình duyệt Firefox thì ta sẽ sử dụng hai yếu tố chính sau đây scrollbar-color: màu sắc cho thanh cuộn và scrollbar-width: xác định độ rộng cho scrollbar. Và dưới đây là ví dụ thiết kế scrollbar chạy trên Firefox nhé (Nhưng khi bạn muốn kiểm tra ví dụ này thì phải chuyển sang sử dụng Firefox thì mới thấy kết quả nha):

See the Pen scrollbar cho Firefox by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cách Ẩn Scrollbar trên trình duyệt

Nếu bạn muốn ẩn scrollbar nhưng vẫn cho phép người dùng có thể cuộn chuột xuống để xem nội dung trong trang thì có thể sử dụng thuộc tính sau nhé:

/*Ẩn scrollbar trên Chrome, Safari và Opera*/
body::-webkit-scrollbar {
  display:none;
}

/*Ẩn scrollbar cho IE, Edge và Firefox*/
body {
 -ms-overflow-style: none; /* IE và Edge */;
  scrollbar-width: none; /* Firefox */
}

Và để dễ hình dùng hơn bạn xem ví dụ nhé:

See the Pen Ẩn Scrollbar by haycuoilennao19 (@haycuoilennao19) on CodePen.

Xây Dựng Và Thiết Kế Scrollbar Với Thư Viện Overlay Scrollbars

Bây giờ chúng ta sẽ đi vào xây dựng với thư viện Overlay Scrollbars để tạo thêm nhiều chức năng cũng như các thiết kế cho thanh cuộn nhé!

Thư viện này ngoài sử dùng bằng Javascript thuần thì nó cũng có các phiên bản cho front-end framework phổ biển hiện nay như là React, Vue, Angular và Jquery. Một điểm mình cảm thấy nên sử dụng thư viện này là bạn có thể thiết kế scrollbar chạy trên nhiều trình duyệt khác nhau mà không cần phải xác định lại thuộc tính trong CSS.

Đầu tiên chúng ta sẽ đi vào các cài đặt nhé (Ở đây mình sẽ sử dụng CDN):

 <script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.12.0/js/OverlayScrollbars.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.12.0/css/OverlayScrollbars.min.css' />

Và bạn có thể xem chi tiết ở đây nhé!

Và bước tiếp theo sau khi cài đặt thì chúng ta sẽ khởi tạo nó bằng lệnh Javascript như đoạn code sau đây nhé:

document.addEventListener("DOMContentLoaded", function() {
    OverlayScrollbars(document.querySelectorAll('body'), {
    className: "os-theme-round-dark",
      scrollbars : {
          clickScrolling : true
      }
    });
});

Đoạn code Javascript ở trên sẽ được chạy mỗi khi trang web được tải thông qua sự kiện DOMContentLoaded. Và className là tên theme được thiết sẵn cho scrollbar được cung cấp bởi thư viện. Và bạn có thể xem chi tiết các theme ở đây nhé.

Và kết quả cuối cùng của chúng ta:

See the Pen Scrollbar su dung thu vien Overlay Scrollbars by haycuoilennao19 (@haycuoilennao19) on CodePen.

Các bạn có thể tìm hiểu thêm tại trang chủ của thư viện Overlay Scrollbars.

Một Số Thư Viện Xây Dựng Scrollbar Khác

Thư Viện Smooth Scrollbar: Đường Dẫn Thư Viện Smooth Scrollbar

Thư Viện SimpleBar : Đường Dẫn Thư Viện SimpleBar

Thư Viện gemini-scrollbar : Đường Dẫn Thư Viện gemini-scrollbar

Thư Viện fakescroll : Đường Dẫn Thư Viện fakescroll

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức về scrollbar hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!