Custom Scrollbar CSS Cho Trang Web

Custom Scrollbar CSS Cho Trang Web


Ngày 15 Tháng 7 Năm 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é!

Custom Scroll CSS

  • ::-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.

Các Thư Viện Xây Dựng Scrollbar

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

Ví Dụ Scrollbar CSS

Customize the Browser's Scrollbar with CSS

Customize the Browser's Scrollbar with CSS

Kết quả bạn xem dưới đây nha.

See the Pen Customize the Browser's Scrollbar with CSS by akinjide (@akinjide) on CodePen.

CSS Scroll Bars

CSS Scroll Bars

Kết quả bạn xem dưới đây nha.

See the Pen CSS Scroll Bars by Ghost Rider (@GhostRider) on CodePen.

Custom scrollbar css for div

Custom scrollbar css for div

Kết quả bạn xem dưới đây nha.

See the Pen CSS-Tricks Almanac: Scrollbars by Zachary Kain (@zakkain) on CodePen.

Custom horizontal scrollbar css

Custom horizontal scrollbar css

Kết quả bạn xem dưới đây nha.

See the Pen Horizontal Scrolling with Scroll Out by Christopher Wallis (@notoriousb1t) on CodePen.

CSS scrollbar style

CSS scrollbar style

Kết quả bạn xem dưới đây nha.

See the Pen Scrollbars & Boxes by Vuild (@vuild) on CodePen.

Scrollbar styling

Scrollbar styling

Kết quả bạn xem dưới đây nha.

See the Pen Scrollbar styling - CSS and JS by rsp (Rafał Pocztarski) (@rsp) on CodePen.

Scrollbar Indicator

Scrollbar Indicator

Kết quả bạn xem dưới đây nha.

See the Pen Pure CSS Pure CSS reading position indicator by Scott Kellum (@scottkellum) on CodePen.

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ẻ!