https://github.com/divriots/infini-scroll
Webcomponent that infinitely scrolls through a list of nodes in horizontal direction.
https://github.com/divriots/infini-scroll
Last synced: over 1 year ago
JSON representation
Webcomponent that infinitely scrolls through a list of nodes in horizontal direction.
- Host: GitHub
- URL: https://github.com/divriots/infini-scroll
- Owner: divriots
- Created: 2021-08-31T10:02:23.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2022-04-15T09:23:14.000Z (about 4 years ago)
- Last Synced: 2025-03-01T14:16:51.382Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://webcomponents.dev/view/LWuupe7NoXwlpP9BiJoG
- Size: 34.2 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Infini Scroll
Webcomponent that infinitely scrolls through a list of nodes in horizontal direction.
0 dependencies, < 250 lines of JS
> Note that in general for most things there are better and more accessible interaction patterns than carousels.
> Do not use it for things that you expect your users to actually interact with.
> This is intended as a show-only reel and **individual items will not be accessible**,
> my advise is to add an aria-label on the infini-scroll and make it focusable,
> to tell users with impaired vision what the reel is displaying.
> https://shouldiuseacarousel.com/
## Features
- Scrolls infinitely by moving nodes in DOM when needed
- Horizontal scroll (shift + mousewheel) interrupts the auto scroll and allows user control
- Click drag interrupts the auto scroll and allows user control
- Mobile drag gesture interrupts the auto scroll and allows user control
## Attributes
- `container-height`, 150 by default. Set this to the total height of one or multiple nodes in case you want multiple rows, in pixels.
- `box-width`, 150 by default. Set this to the total width in pixels (including margin, border etc.) of one node.
- `row-amount`, 1 by default, but you may want more rows. Make sure to adjust this along with the `container-height` attribute so that the amount of rows does fit within the container height.
- `scroll-interval`, 1 by default, interval in milliseconds to scroll
- `scroll-amount`, 1 by default, amount of pixels to scroll per interval, Firefox does not support floating numbers here!
- `resume-time`, 2000 by default time until resuming the auto scroll after user interaction has stopped
- `drag-speed`, default 4, increase to make dragging slide the list faster
- `reverse`, auto scroll goes in reverse direction
- `follow-user-direction`, by setting this attribute, the infini-scroll will switch to the user's last manual scroll direction
## Future
- Allow box width to be dynamic (vary per box, compute automatically), remove box-width attr
- Make click drag play well with velocity and release, similar to native mobile drag gestures
