ScrollView is a container for long form content, such as order summary line items, that allows for scrolling so customers can expose more content as they view.
optional = ?
||Provides a hint to the user that the area is scrollable.
||Adjust the minimum block size.
||Adjust the maximum block size.
||Adjust the minimum inline size.
||Adjust the maximum inline size.
||The direction on which the content is scrollable.
||Scroll to a specific position or to an element.|
||Callback function that is called when the scroll position changes. Allows to listen to events inside the component returning the position of the scroll.
Note: On touch devices, the onScroll event is fired only when the user finishes scrolling which differs from non touch devices, where the onScroll event is fired when the user scrolls
||Callback function that is called when the scroll position reaches one of the edges.|
Conditional stylesAnchor link to section titled "Conditional styles"
Components can have conditional properties, which enable you to set different values when certain conditions are met. The conditions that Shopify currently supports are changes in the viewport sizes and in interactive states such as
Getting startedAnchor link to section titled "Getting started"
You'll need the
If you're using React, then use the following package:
Anchor link to section titled "Style helper class"
Style helper class
Style is a helper for authoring conditional values for prop styles.
Write complex conditional styles based on one or more conditions, such as viewport sizes and interactive states, in a concise and expressive way.
||Sets an optional
||Adjusts the style based on different
The following conditions are supported for conditional styles.
Multiple conditions can be set on the same
||The condition is met when an element is hovered on with the cursor (mouse pointer).|
||The condition is met when an element is clicked, tapped on or selected using the Tab key.|
||The condition is met when the device matches the minimum width.|
This section provides examples of conditions.
Simple conditionAnchor link to section titled "Simple condition"
Using simple conditional styling enables you to specify a styling change when a condition is met. In this example, the View’s padding will be
loose on hover.
Default style with conditionsAnchor link to section titled "Default style with conditions"
Default styling can be combined with specific conditions. In this example, the Grid’s children will be stacked by default and side by side on viewports above the
Multiple conditionsAnchor link to section titled "Multiple conditions"
Conditions can also be combined to accomodate more complex interactions and user interfaces.
In this example, the Grid’s children will have the following characteristics:
- stacked by default
- side by side (
70%) on viewports above the
- side by side (
50%) on viewports above the
smallbreakpoint when hovered
ScrollViewEventAnchor link to section titled "ScrollViewEvent"
ConditionalStyleAnchor link to section titled "ConditionalStyle"
||The default value applied when none of the conditional values specified in
||An array of conditional values.|
ConditionalValueAnchor link to section titled "ConditionalValue"
||The conditions that must be met for the value to be applied. At least one condition must be specified.|
||The value that will be applied if the conditions are met.|