Scroll views
Enable people to scroll to content that doesn’t fit in the current display.
Overview
When the content of a view doesn’t fit in the display, you can wrap the view in a ScrollView to enable people to scroll on one or more axes. Configure the scroll view using view modifiers. For example, you can set the visibility of the scroll indicators or the availability of scrolling in a given dimension.
[Image]
You can put any view type in a scroll view, but you most often use a scroll view for a layout container with too many elements to fit in the display. For some container views that you put in a scroll view, like lazy stacks, the container doesn’t load views until they are visible or almost visible. For others, like regular stacks and grids, the container loads the content all at once, regardless of the state of scrolling.
Lists and Tables implicitly include a scroll view, so you don’t need to add scrolling to those container types. However, you can configure their implicit scroll views with the same view modifiers that apply to explicit scroll views.
For design guidance, see Scroll views in the Human Interface Guidelines.
Topics
Creating a scroll view
Managing scroll position
scrollPosition(_:anchor:)scrollPosition(id:anchor:)defaultScrollAnchor(_:)defaultScrollAnchor(_:for:)ScrollAnchorRoleScrollPosition
Defining scroll targets
scrollTargetBehavior(_:)scrollTargetLayout(isEnabled:)ScrollTargetScrollTargetBehaviorScrollTargetBehaviorContextPagingScrollTargetBehaviorViewAlignedScrollTargetBehaviorAnyScrollTargetBehaviorScrollTargetBehaviorPropertiesScrollTargetBehaviorPropertiesContext
Animating scroll transitions
scrollTransition(_:axis:transition:)scrollTransition(topLeading:bottomTrailing:axis:transition:)ScrollTransitionPhaseScrollTransitionConfiguration
Responding to scroll view changes
onScrollGeometryChange(for:of:action:)onScrollTargetVisibilityChange(idType:threshold:_:)onScrollVisibilityChange(threshold:_:)onScrollPhaseChange(_:)ScrollGeometryScrollPhaseScrollPhaseChangeContext
Showing scroll indicators
scrollIndicatorsFlash(onAppear:)scrollIndicatorsFlash(trigger:)scrollIndicators(_:axes:)horizontalScrollIndicatorVisibilityverticalScrollIndicatorVisibilityScrollIndicatorVisibility
Managing content visibility
Disabling scrolling
Configuring scroll bounce behavior
scrollBounceBehavior(_:axes:)horizontalScrollBounceBehaviorverticalScrollBounceBehaviorScrollBounceBehavior
Configuring scroll edge effects
scrollEdgeEffectStyle(_:for:)scrollEdgeEffectHidden(_:for:)ScrollEdgeEffectStylesafeAreaBar(edge:alignment:spacing:content:)