@microsoft/fast-foundation > HorizontalScroll
HorizontalScroll class
A HorizontalScroll Custom HTML Element
start - Content which can be provided before the scroll area
end - Content which can be provided after the scroll area
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
scrollstart - Fires a custom 'scrollstart' event when scrolling
scrollend - Fires a custom 'scrollend' event when scrolling stops
Signature:export declare class HorizontalScroll extends FoundationElement
Properties
| Property | Modifiers | Type | Description |
|---|---|---|---|
| content | HTMLDivElement | Reference to DOM element that holds the slotted content | |
| duration | string | The CSS time value for the scroll transition duration. Overrides the speed attribute. | |
| easing | ScrollEasing | Attribute used for easing, defaults to ease-in-out | |
| flippersHiddenFromAT | boolean | Attribute to hide flippers from assistive technology | |
| nextFlipperContainer | HTMLDivElement | Reference to flipper to scroll to the next content | |
| previousFlipperContainer | HTMLDivElement | Reference to flipper to scroll to previous content | |
| scrollContainer | HTMLDivElement | Reference to DOM element that scrolls the content | |
| scrollItems | HTMLElement[] | The default slotted items placed in the scrolling container. | |
| speed | number | Speed of scroll in pixels per second | |
| view | HorizontalScrollView | View: default | mobile |
Methods
| Method | Modifiers | Description |
|---|---|---|
| connectedCallback() | ||
| disconnectedCallback() | ||
| keyupHandler(e) | Lets the user arrow left and right through the horizontal scroll | |
| resized() | Monitors resize event on the horizontal-scroll element | |
| scrolled() | Monitors scrolled event on the content container | |
| scrollItemsChanged(previous, next) | Updates scroll stops and flippers when scroll items change | |
| scrollToNext() | Scrolls items to the right | |
| scrollToPosition(newPosition, position) | Handles scrolling with easing | |
| scrollToPrevious() | Scrolls items to the left |