Scroll

A horizontal scroller that the mouse wheel, the touchpad and the arrow keys scroll sideways.

ax-scroll is a native horizontal scroller (overflow-x: auto) like the Start screen of Windows 8. A vertical mouse wheel, a touchpad swiped up and down, the up and down keys, Page Up and Page Down scroll it sideways.

Touch, horizontal touchpad swipes, the scrollbar, the left and right keys, scroll snapping and assistive technology work as usual. At either end, a wheel gesture goes on to the page. The scroller is as tall as you make it, so give it a height.

Installation

shell 
npm install @ax-design/scroll

and import it:

js 
import { register } from '@ax-design/scroll';
register();

If you don't use a bundler, load the script instead:

html 
<script src="https://unpkg.com/@ax-design/scroll/build/main.js"></script>
<script>AxScroll.register();</script>
1
2
3
4
5
6
7
8

Wheel

Put a wide element inside ax-scroll and turn your mouse wheel over it. The content scrolls sideways, with the smooth scrolling of the browser. Quick notches add up.

A touchpad swiped up and down scrolls it 1:1 with its own momentum. A wheel over something inside that scrolls vertically and can still move, or over a form field, is left alone.

Try it

140 px
html 
<ax-scroll style="height: 200px">
  <div style="display: flex; width: max-content">
    <div class="item">1</div>
    <div class="item">2</div>
    ...
  </div>
</ax-scroll>
css 
.item {
  flex: none;
  width: 140px;
}
1
2
3
4
5
6
7
8

Scroll snapping

Because the scroller is native, CSS scroll snapping works on it. Snap the items to the start edge and each wheel notch stops on an item.

Turn snapping off to scroll freely.

Try it

html 
<ax-scroll>
  <div class="strip">...</div>
</ax-scroll>
css 
ax-scroll {
  scroll-snap-type: x mandatory;
}

.item {
  scroll-snap-align: start;
}

With a tile group

A finger drag on a touch screen scrolls the page vertically over the scroller by default. Add cross-slide and touch drags only pan sideways, so vertical drags go to the content.

Together with drag="cross-slide" on a tile group, this is the gesture of Windows 8: a finger that starts moving up or down drags the tile, one that starts sideways scrolls. A mouse drags as with press.

Try it

html 
<ax-scroll cross-slide>
  <ax-tile-group drag="cross-slide">
    <ax-tile columns="3" rows="3" layers="fill reveal"></ax-tile>
    ...
  </ax-tile-group>
</ax-scroll>
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

bindScroll

bindScroll gives the same scrolling to a scroller of your own, or to the whole page. In the preview, the top scroller is a plain overflow-x: auto element: the wheel does not move it. The bottom one is ax-scroll, which calls bindScroll for itself.

Pass an element that scrolls horizontally, or window for a page laid out sideways. It returns an object with unbind() and scrollAlong(delta, smooth). With { keys: false } the up and down keys and Page Up and Page Down are left alone.

Try it

140 px
js 
import { bindScroll } from '@ax-design/scroll';

// A scroller of your own:
const binding = bindScroll(document.querySelector('.my-scroller'));

// A page laid out sideways: body { overflow-x: auto; overflow-y: hidden; }
bindScroll(window);

// Later:
binding.unbind();
js 
// Keep the up and down keys for the page.
bindScroll(element, { keys: false });

// Scroll by 200px toward the end, smoothly.
binding.scrollAlong(200, true);

Reference

cross-slide attribute

boolean, default off

Touch drags only pan sideways; vertical drags go to the content, for example a tile group that drags a tile on a vertical swipe.

scrollAlong(delta, smooth) method

(delta: number, smooth: boolean) => void

Scrolls by delta px toward the end (negative: toward the start). smooth uses the browser's smooth scrolling and adds up with a smooth scroll that is still running.

bindScroll(target, options) method

(target: HTMLElement | Window, options?: { keys?: boolean }) => { scrollAlong, unbind }, default { keys: true }

The same scrolling for a scroller of your own, or for the whole page. Exported by the package.

WheelSwap method

class

The class that decides what a wheel event does. It is exported and has no DOM dependency.