Skip to main content
Version: 1.x

@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

PropertyModifiersTypeDescription
contentHTMLDivElementReference to DOM element that holds the slotted content
durationstringThe CSS time value for the scroll transition duration. Overrides the speed attribute.
easingScrollEasingAttribute used for easing, defaults to ease-in-out
flippersHiddenFromATbooleanAttribute to hide flippers from assistive technology
nextFlipperContainerHTMLDivElementReference to flipper to scroll to the next content
previousFlipperContainerHTMLDivElementReference to flipper to scroll to previous content
scrollContainerHTMLDivElementReference to DOM element that scrolls the content
scrollItemsHTMLElement[]The default slotted items placed in the scrolling container.
speednumberSpeed of scroll in pixels per second
viewHorizontalScrollViewView: default | mobile

Methods

MethodModifiersDescription
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