fast-horizontal-scroll

An implementation of a content scroller as a web-component.

Setup

Basic Setup

import {
    provideFASTDesignSystem,
    fastHorizontalScroll,
    fastFlipper
} from "@microsoft/fast-components";

provideFASTDesignSystem()
    .register(
        fastHorizontalScroll(),
        fastFlipper()
    );

Customizing Flippers

import { html } from "@microsoft/fast-element";
import {
    provideFASTDesignSystem,
    fastHorizontalScroll
} from "@microsoft/fast-components";

provideFASTDesignSystem()
    .register(
        fastHorizontalScroll({
            nextFlipper: html<HorizontalScroll>`
                <fast-flipper
                    @click="${x => x.scrollToNext()}"
                    aria-hidden="${x => x.flippersHiddenFromAT}"
                ></fast-flipper>
            `,
            previousFlipper: html<HorizontalScroll>`
                <fast-flipper
                    @click="${x => x.scrollToPrevious()}"
                    direction="previous"
                    aria-hidden="${x => x.flippersHiddenFromAT}"
                ></fast-flipper>
            `
        })
    );

Usage

<fast-horizontal-scroll>
    <fast-card>
        Card number 1
        <fast-button>A button</fast-button>
    </fast-card>
    <fast-card>
        Card number 2
        <fast-button>A button</fast-button>
    </fast-card>
    <fast-card>
        Card number 3
        <fast-button>A button</fast-button>
    </fast-card>
    <fast-card>
        Card number 4
        <fast-button>A button</fast-button>
    </fast-card>
    <fast-card>
        Card number 5
        <fast-button>A button</fast-button>
    </fast-card>
    <fast-card>
        Card number 6
        <fast-button>A button</fast-button>
    </fast-card>
    <fast-card>
        Card number 7
        <fast-button>A button</fast-button>
    </fast-card>
    <fast-card>
        Card number 8
        <fast-button>A button</fast-button>
    </fast-card>
</fast-horizontal-scroll>

Create your own design

import { html } from "@microsoft/fast-element";
import {
    HorizontalScroll,
    HorizontalScrollOptions,
    horizontalScrollTemplate as template,
} from "@microsoft/fast-foundation";
import { horizontalScrollStyles as styles } from "./my-horizontal-scroll.styles";

export const myHorizontalScroll = HorizontalScroll.compose<HorizontalScrollOptions>({
    baseName: "horizontal-scroll",
    template,
    styles,
    nextFlipper: html`
        <fast-flipper
            @click="${x => x.scrollToNext()}"
            aria-hidden="${x => x.flippersHiddenFromAT}"
        ></fast-flipper>
    `,
    previousFlipper: html`
        <fast-flipper
            @click="${x => x.scrollToPrevious()}"
            direction="previous"
            aria-hidden="${x => x.flippersHiddenFromAT}"
        ></fast-flipper>
    `,
});

API

class: HorizontalScroll

Superclass

Name	Module	Package
FoundationElement	/src/foundation-element/foundation-element.js

Fields

Name	Privacy	Type	Default	Description	Inherited From
scrollContainer	public	HTMLDivElement		Reference to DOM element that scrolls the content
content	public	HTMLDivElement		Reference to DOM element that holds the slotted content
previousFlipperContainer	public	HTMLDivElement		Reference to flipper to scroll to previous content
nextFlipperContainer	public	HTMLDivElement		Reference to flipper to scroll to the next content
speed	public	number	600	Speed of scroll in pixels per second
duration	public	string		The CSS time value for the scroll transition duration. Overrides the `speed` attribute.
easing	public	ScrollEasing	"ease-in-out"	Attribute used for easing, defaults to ease-in-out
flippersHiddenFromAT	public	boolean	false	Attribute to hide flippers from assistive technology
scrollItems	public	HTMLElement[]		The default slotted items placed in the scrolling container.
view	public	HorizontalScrollView		View: default or mobile
$presentation	public	ComponentPresentation or null		A property which resolves the ComponentPresentation instance for the current component.	FoundationElement
template	public	ElementViewTemplate or void or null		Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.	FoundationElement
styles	public	ElementStyles or void or null		Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.	FoundationElement

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
scrollItemsChanged	public	Updates scroll stops and flippers when scroll items change	previous: HTMLElement[], next: HTMLElement[]
keyupHandler	public	Lets the user arrow left and right through the horizontal scroll	e: Event & KeyboardEvent
scrollToPrevious	public	Scrolls items to the left		void
scrollToNext	public	Scrolls items to the right		void
scrollToPosition	public	Handles scrolling with easing	newPosition: number, position: number	void
resized	public	Monitors resize event on the horizontal-scroll element		void
scrolled	public	Monitors scrolled event on the content container		void
templateChanged	protected			void	FoundationElement
stylesChanged	protected			void	FoundationElement

Events

Name	Type	Description	Inherited From
scrollstart		Fires a custom 'scrollstart' event when scrolling
scrollend		Fires a custom 'scrollend' event when scrolling stops

Attributes

Name	Field	Inherited From
	speed
duration	duration
easing	easing
flippers-hidden-from-at	flippersHiddenFromAT
view	view

CSS Parts

Name	Description
scroll-area	Wraps the entire scrollable region
scroll-view	The visible scroll area
content-container	The container for the content
scroll-prev	The previous flipper container
scroll-action-previous	The element wrapping the previous flipper
scroll-next	The next flipper container
scroll-action-next	The element wrapping the next flipper

Slots

Name	Description
start	Content which can be provided before the scroll area
end	Content which can be provided after the scroll area

---