Share Tạo thanh cuộn nội dung chuyên nghiệp với thư viện pagemap

filiallion · 02/05/2020

Trước đây, tôi có giới thiệu với các bạn một vài thư viện JavaScript dùng để tuỳ biến thanh cuộn cho nội dung trên website, ví dụ như jQuery Scrollbar hay ProngnRoll. Điểm giống nhau của các thư viện này là cùng làm nhiệm vụ tuỳ biến thanh cuộn mặc định của trình duyệt theo một phong cách riêng bằng cách khai báo các cấu hình JavaScript hay tuỳ chỉnh CSS. Bài viết này tôi sẽ giới thiệu với các bạn thư viện pagemap dùng để tạo thanh cuộn hoàn toàn mới chứ không phải tuỳ biến từ thanh cuộn mặc định của trình duyệt nữa.

Thư viện pagemap giúp các bạn dễ dàng tạo thanh cuộn nội dung với phần thể hiện thật sự sinh động, chuyên nghiệp, nó rất giống với cách cuộn nội dung như các ứng dụng đọc tập tin PDF. Để dễ hình dung, các bạn nên xem qua demo tại địa chỉ https://larsjung.de/pagemap/latest/demo/text.html.

Các bạn có thể tải thư viện pagemap tại địa chỉ https://github.com/lrsjng/pagemap và tích hợp vào website với dòng mã lệnh HTML như sau:

HTML:

<script src="path/to/pagemap.min.js"></script>

Bây giờ, các bạn khai báo nội dung CSS sau:

CSS:

.pagemap {
    width: 300px;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
}

Tiếp theo, các bạn tạo thành phần canvas như sau:

HTML:

<canvas class="pagemap"></canvas>

Cuối cùng là cài đặt thư viện pagemap với nội dung JavaScript như sau:

JavaScript:

pagemap(
    document.querySelector('.pagemap'),
    {
        viewport: null,
        styles: {
            'header,footer,section,article': rgba(0, 0, 0, 0.08),
            'h1,a': rgba(0, 0, 0, 0.10),
            'h2,h3,h4': rgba(0, 0, 0, 0.08)
        },
        back: rgba(0, 0, 0, 0.02),
        view: rgba(0, 0, 0, 0.05),
        drag: rgba(0, 0, 0, 0.10),
        interval: null
    }
);

Các bạn có thể tìm hiểu thêm về thư viện pagemap tại địa chỉ https://github.com/lrsjng/pagemap.

Share Tạo thanh cuộn nội dung chuyên nghiệp với thư viện pagemap

filiallion

Administrator