ScrollToComponent Command
Scroll forward or backward through a ScrollView
, Sequence
, or GridSequence to display a specified component.
Properties
The ScrollToComponent
command has the properties shown in the following table, in addition to the common command properties. Set the type
property to ScrollToComponent
.
In the following table, the "Default" column shows "Required" for properties that must have a value for the command to run. Otherwise it displays the default value, which might be none.
Property | Type | Default | Description |
---|---|---|---|
|
|
|
The alignment of the item after scrolling |
|
|
The child component to move into view. | |
|
Non-negative Integer |
System default |
Target duration of the scrolling animation (in milliseconds). |
For example, the following command scrolls until the component with the ID recipeSteps
is in view.
{
"type": "ScrollToComponent",
"componentId": "recipeSteps",
"align": "center"
}
The ScrollToComponent
command looks for the first Sequence
or ScrollView
at or before the componentId
and scrolls that one.
Scrolling stops if the user touches the screen. Stopping the command stops scrolling immediately.
The ScrollToComponent
command is ignored in fast mode.
align
The alignment of the item on the screen after scrolling and before speech. Alignment is an enumerated value with options shown in the following table.
Alignment | Description |
---|---|
|
The top/left side of the item is placed at the top/left side of the scrolling container. |
|
The center of the item is placed in the center of the container. |
|
The bottom/right side of the item is placed at the bottom/right side of the scrolling container. |
|
The item is moved the minimal distance necessary to bring it fully into view. |
componentId
A selector that identifies the target component for the command. When not provided, defaults to :source
. The :source
selector targets the component that issued the ScrollToComponent
command.
targetDuration
Target duration of the scrolling animation in milliseconds. The command attempts to take the specified amount of time to scroll, but might differ based on the runtime. When you don't specify the targetDuration
, the command uses the runtime-defined duration. Set the targetDuration
to zero to jump to the scroll position immediately.
Reinflation strategy
When the Reinflate
command runs, the ScrollToComponent
command can resume after Alexa reinflates the document. The command resumes when it runs on a sequencer
specified in the preservedSequencers
array on Reinflate
. The command saves the target component and the alignment specified in the align
property.
If the target component isn't in the reinflated hierarchy or isn't a descendant of a scrollable component, the command is ignored.
When Alexa reinflates the document, scrolling resumes and scrolls the target component into position as specified by align
.
ScrollToComponent example
The following example shows a Sequence
that displays a long list of items. The list of items includes both the color items and section headings that correspond to a range of the alphabet. Each section heading has a component ID. For example, the "N-R" section has the ID "n-r". The TouchWrapper
components displayed next to the list use the ScrollToComponent
to scroll to the specified section in the list.
Related topics
Last updated: frontmatter-missing