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

Nếu bạn muốn làm giao diện kéo ngang giống như Stories trên Facebook, bài viết này sẽ giúp bạn.

JavaScript

Để kéo ngang, bạn dùng Dragscroll.js.

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

CSS

Thêm .scroller.

.scroller {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
}
.scroller::-webkit-scrollbar {
    height: 0;
    width: 0;
}