Share Tuỳ biến thanh cuộn với thư viện jQuery Scrollbar

filiallion · 12/09/2017

Mặc định, giao diện thanh cuộn của trình duyệt không đồng nhất trên tất cả các trình duyệt khác nhau cũng như trên các hệ điều hành khác nhau, mỗi trình duyệt trên các hệ điều hành khác nhau lại có một kiểu dáng khác nhau. Đôi lúc, chúng ta lại muốn website của mình có giao diện như nhau trên mọi trình duyệt cũng như trên mọi hệ điều hành hoặc muốn thiết kế thanh cuộn tuỳ biến theo phong cách riêng của từng website thì phải làm như thế nào? Với JavaScript thì có rất nhiều thư viện để làm việc này và trong số đó tôi lựa chọn jQuery Scrollbar để tuỳ biến thanh cuộn. Thư viện jQuery Scrollbar có khả năng tuỳ biến giao diện thanh cuộn của các thành phần bên trong website cũng như cả thanh cuộn của trình duyệt.

Các bạn có thể tham khảo demo cũng như tải thư viện tại địa chỉ https://gromo.github.io/jquery.scrollbar.

Việc sử dụng thư viện jQuery Scrollbar cũng khá đơn giản, các bạn thực hiện theo các bước như sau:

1. Tải thư viện jQuery tại địa chỉ http://jquery.com/download (Tôi sử dụng phiên bản 3.2.1).
2. Tải thư viện jQuery Scrollbar tại địa chỉ https://github.com/gromo/jquery.scrollbar/archive/gh-pages.zip.
3. Tạo cấu trúc tập tin và thư mục để chứa mã nguồn như sau:

Code:

css
-----jquery.scrollbar.css
-----style.css (Tạo mới)
js
-----jquery-3.2.1.min.js
-----jquery.scrollbar.min.js
-----script.js (Tạo mới)
index.html (Tạo mới)

4. Mở tập tin css/style.css và nhập vào nội dung mã lệnh như sau:

CSS:

.scrollbar .scroll-wrapper {
    max-height: 300px;
    border: 1px #ccc solid;
}

.scrollbar .scroll-content {
    padding: 0 15px;
}

5. Mở tập tin js/script.js và nhập vào nội dung mã lệnh như sau:

JavaScript:

$(document).ready(function() {
    $('.scrollbar-inner').scrollbar();
});

6. Mở tập tin index.html và nhập vào nội dung mã lệnh như sau:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/jquery.scrollbar.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.scrollbar.min.js"></script>
<script src="js/script.js"></script>
<title>jQuery Scrollbar</title>
</head>
<body>
<div class="scrollbar">
    <div class="scrollbar-inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>
</body>
</html>

Bây giờ các bạn chạy tập tin index.html để xem kết quả.

Share Tuỳ biến thanh cuộn với thư viện jQuery Scrollbar

filiallion

Administrator

Attachments