Two elements and one line
The viewport clips, the content moves inside it. Drag with a mouse or a finger, throw it, pull it past the edge, scroll with a wheel or a trackpad, Tab into it and use the arrow keys. Clicks on links and buttons still work, the click that ends a drag does not fire.
Every example below runs the code next to it.
Horizontal gallery
A strip in a page that scrolls vertically. Horizontal drags move the strip, vertical swipes and the
mouse wheel scroll the page. The cards are links: a click opens one, a drag does not.
onUpdate fills the progress bar.
Big picture
Both directions with inertia. Pull the picture past an edge: it resists more the further you pull
and springs back on release. setPosition() starts from the middle once the image loads.
Carousel with snap
snap receives the position where inertia would stop and returns the slide to stop on.
The arrows use scrollBy(), the dots scrollTo(), both animate with the same
physics as a throw.
Wide table
scrollMode: 'native' moves the native scroll of the viewport, so the sticky header and
first column, scrollbars and touch scrolling work as usual. axisLock keeps a drag on a
row or a column. Checkboxes take clicks, a press on them does not drag.
Tabs
wheel: 'horizontal' turns the mouse wheel into horizontal scroll, the page takes over
at the end of the strip. A click centers the tab with scrollIntoView(), a drag
selects nothing.
Your own rendering
With scrollMode: 'none' ScrollBooster only computes the position, with inertia and
bounce, and onUpdate draws it. Here each layer moves at its own depth.
More demos
Pages for every scenario, each scroller with its live state.
- Sandbox Every option as a control, methods and callbacks
- Gallery Strips with links, snap, tabs, right-to-left
- Native scroll Mouse drag with native touch, the whole page
- Nested Rows in a board, a scroller in a scroller
- Focus and keys Tab, fields and keyboard scrolling
- Images Content that grows when images load
- Mount and destroy Create, move, replace content, destroy
- Motion Reduced motion and refresh rates