Skip to main content
Version: 1.x

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

NameModulePackage
FoundationElement/src/foundation-element/foundation-element.js

Fields

NamePrivacyTypeDefaultDescriptionInherited From
scrollContainerpublicHTMLDivElementReference to DOM element that scrolls the content
contentpublicHTMLDivElementReference to DOM element that holds the slotted content
previousFlipperContainerpublicHTMLDivElementReference to flipper to scroll to previous content
nextFlipperContainerpublicHTMLDivElementReference to flipper to scroll to the next content
speedpublicnumber600Speed of scroll in pixels per second
durationpublicstringThe CSS time value for the scroll transition duration. Overrides the `speed` attribute.
easingpublicScrollEasing"ease-in-out"Attribute used for easing, defaults to ease-in-out
flippersHiddenFromATpublicbooleanfalseAttribute to hide flippers from assistive technology
scrollItemspublicHTMLElement[]The default slotted items placed in the scrolling container.
viewpublicHorizontalScrollViewView: default or mobile
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets 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
stylespublicElementStyles or void or nullSets 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

NamePrivacyDescriptionParametersReturnInherited From
scrollItemsChangedpublicUpdates scroll stops and flippers when scroll items changeprevious: HTMLElement[], next: HTMLElement[]
keyupHandlerpublicLets the user arrow left and right through the horizontal scrolle: Event & KeyboardEvent
scrollToPreviouspublicScrolls items to the leftvoid
scrollToNextpublicScrolls items to the rightvoid
scrollToPositionpublicHandles scrolling with easingnewPosition: number, position: numbervoid
resizedpublicMonitors resize event on the horizontal-scroll elementvoid
scrolledpublicMonitors scrolled event on the content containervoid
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Events

NameTypeDescriptionInherited From
scrollstartFires a custom 'scrollstart' event when scrolling
scrollendFires a custom 'scrollend' event when scrolling stops

Attributes

NameFieldInherited From
speed
durationduration
easingeasing
flippers-hidden-from-atflippersHiddenFromAT
viewview

CSS Parts

NameDescription
scroll-areaWraps the entire scrollable region
scroll-viewThe visible scroll area
content-containerThe container for the content
scroll-prevThe previous flipper container
scroll-action-previousThe element wrapping the previous flipper
scroll-nextThe next flipper container
scroll-action-nextThe element wrapping the next flipper

Slots

NameDescription
startContent which can be provided before the scroll area
endContent which can be provided after the scroll area