Share Tuỳ biến thanh cuộn trình duyệt đơn giản với thư viện OverlayScrollbars

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Tuỳ biến thanh cuộn trình duyệt là một trong các vấn đề mà các bạn thiết kế giao diện website thường quan tâm. Mục đích của việc tuỳ biến thanh cuộn trình duyệt là để thiết kế lại giao diện thanh cuộn theo phong cách riêng của từng website. Ngoài ra, việc tuỳ biến giao diện thanh cuộn cũng giúp cho giao diện website đồng nhất trên tất cả các trình duyệt và thiết bị. Bài viết này tôi giới thiệu với các bạn thư viện OverlayScrollbars dùng để tuỳ biến giao diện của thanh cuộn trình duyệt.

Ưu điểm của thư viện OverlayScrollbars là gọn nhẹ, đơn giản trong sử dụng nên các bạn mới làm quen cũng có thể dễ dàng sử dụng. Các bạn có thể sử dụng thư viện OverlayScrollbars như một plugin của jQuery hoặc sử dụng mà không cần tới jQuery.

Trước tiên, các bạn cần phải tải về thư viện OverlayScrollbars tại địa chỉ https://github.com/KingSora/OverlayScrollbars hoặc sử dụng công cụ NPM với dòng lệnh:
Code:
npm install overlayscrollbars
Các bạn tích hợp thư viện OverlayScrollbars vào website với nội dung mã lệnh HTML như sau:
HTML:
<link href="path/to/OverlayScrollbars.min.css" rel="stylesheet">
<script src="path/to/OverlayScrollbars.min.js"></script>
Bây giờ, các bạn cài đặt thư viện OverlayScrollbars để tuỳ biến thanh cuộn trình duyệt như sau:
JavaScript:
document.addEventListener('DOMContentLoaded', function() {
    OverlayScrollbars(
        document.querySelectorAll('body'),
        {}
    );
});
Hoặc cài đặt thư viện OverlayScrollbars như một plugin jQuery:
JavaScript:
$(function() {
    $('body').overlayScrollbars({});
});
Các bạn có thể tìm hiểu thêm về thư viện OverlayScrollbars tại địa chỉ https://github.com/KingSora/OverlayScrollbars.
 
Back
Top