Làm giao diện kéo ngang không cần Scrollbar với Dragscroll.js

Làm giao diện kéo ngang không cần thanh cuộn với Dragscroll.js

Muốn tạo giao diện kiểu Stories như trên Facebook hoặc carousel sản phẩm có thể kéo bằng chuột mà không hiển thị thanh cuộn? Với Dragscroll.js, bạn có thể làm điều này rất dễ dàng mà không cần dùng đến thư viện phức tạp.

1. Thêm thư viện Dragscroll.js

Chèn thư viện vào cuối trang HTML hoặc trước thẻ </body>:

<script src="https://cdnjs.cloudflare.com/ajax/libs/dragscroll/0.0.8/dragscroll.min.js" integrity="sha512-/ncZdOhQm5pgj5KHy720Ck7XF5RzYK6rtUsLNnGcitXrKT3wUYzTrPlOSG7SdL2kDzkuLEOFvrQRyllcZkeAlg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

2. Viết CSS cho vùng kéo

.scroller {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}

.scroller::-webkit-scrollbar {
    display: none;
}

.dragscroll-element {
    display: inline-block;
    padding: 1rem;
    margin-right: 1rem;
    background: #eee;
    border-radius: 4px;
    min-width: 100px;
    text-align: center;
    font-weight: bold;
}

3. Tạo HTML vùng kéo ngang

Thêm class dragscroll vào phần tử bao ngoài là đủ để kích hoạt tính năng kéo:

<div class="dragscroll scroller">
    <div class="dragscroll-element">1</div>
    <div class="dragscroll-element">2</div>
    <div class="dragscroll-element">3</div>
    <div class="dragscroll-element">4</div>
    <div class="dragscroll-element">5</div>
</div>

4. Kết quả

Người dùng có thể kéo ngang bằng chuột (hoặc cảm ứng trên mobile) mà không cần thanh cuộn, tương tự như trải nghiệm kéo Story trên ứng dụng.

Lưu ý thêm

• Dragscroll hoạt động tốt với overflow-x: auto và white-space: nowrap
• Có thể dùng cho danh sách sản phẩm, tag, định nghĩa, ảnh, v.v.
• Không cần viết JavaScript gì thêm – chỉ cần gắn class

Kết luận

Dragscroll.js là giải pháp nhỏ gọn nhưng cực kỳ hữu ích khi bạn muốn tạo hiệu ứng kéo ngang mượt mà và hiện đại. Rất phù hợp với giao diện mobile hoặc khi cần tiết kiệm không gian chiều dọc.