@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 |