Sử dụng SyncScroll để đồng bộ các thanh cuộn trong JavaScript

Trong các trang web có nhiều vùng nội dung có thể cuộn, việc đồng bộ hóa các thanh cuộn giữa các phần tử khác nhau giúp người dùng có trải nghiệm mượt mà hơn. SyncScroll là một kỹ thuật JavaScript cho phép đồng bộ cuộn giữa các vùng nội dung, đảm bảo rằng khi người dùng cuộn một vùng, các vùng còn lại cũng cuộn theo.

Khi nào sử dụng SyncScroll?

• Khi bạn có nhiều vùng cuộn trên một trang web, ví dụ như khi sử dụng các bảng lớn hoặc các vùng chứa văn bản dài.
• Khi bạn muốn cải thiện trải nghiệm người dùng, giúp họ dễ dàng theo dõi các thông tin tương tự khi cuộn.
• Khi cần tạo các giao diện phức tạp như dashboards hoặc trang web với các cửa sổ chia sẻ thông tin, nơi việc cuộn đồng bộ giúp người dùng dễ dàng so sánh dữ liệu.

Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng SyncScroll để đồng bộ các thanh cuộn trong JavaScript.

Cài đặt Syncscroll

Tải xuống File và giải nén để có được file syncscroll.js hoặc cài đặt thông qua Bower:

$ bower install syncscroll

Sử dụng SyncScroll

Trong thẻ head của trang, load file syncscroll.js

<script src="path/to/syncscroll.js"></script>

Thêm class syncscroll vào trong các thẻ cần đồng bộ thanh cuộn và đặt name của chúng cùng 1 tên để syncscroll hiểu là các thẻ này sẽ được đồng bộ với nhau.

   <div class="scroll-container">
        <div class="scroll-area syncscroll" name="scrollArea1">
            <div class="content">
                <p>Content Area 1</p>
                <p>Thêm nội dung vào đây để thử cuộn...</p>
            </div>
        </div>
        <div class="scroll-area syncscroll" name="scrollArea1">
            <div class="content">
                <p>Content Area 2</p>
                <p>Thêm nội dung vào đây để thử cuộn...</p>
            </div>
        </div>
   </div>

Trường hợp sau đó bạn cần loại bỏ 1 vài thẻ ra khỏi đồng bộ hoặc thêm thẻ mới bằng js thì nhớ gọi hàm syncscroll.reset() để thực hiện đồng bộ hóa lại lần nửa.

<script>
      syncscroll.reset()
</script>

Kết quả

Như vậy là xong rồi, sau khi thực hiện như trên bạn sẽ được kết quả như bên dưới.