PolarisScrollable
The scrollable component is a container for long form content, such as terms of service, that allows for scrolling so merchants can expose more text as they read.
Scrollable component examples
Use when you need to make a region within the page independently scrollable. It’s often used in modals and other panes where it’s helpful to provide an extra visual cue that content exists below or above the fold.
import {LegacyCard, Scrollable} from '@shopify/polaris';
import React from 'react';
function ScrollableExample() {
return (
<LegacyCard title="Terms of service" sectioned>
<Scrollable shadow style={{height: '100px'}} focusable>
<p>
By signing up for the Shopify service (“Service”) or any of the
services of Shopify Inc. (“Shopify”) you are agreeing to be bound by
the following terms and conditions (“Terms of Service”). The Services
offered by Shopify under the Terms of Service include various products
and services to help you create and manage a retail store, whether an
online store (“Online Services”), a physical retail store (“POS
Services”), or both. Any new features or tools which are added to the
current Service shall be also subject to the Terms of Service. You can
review the current version of the Terms of Service at any time at
https://www.shopify.com/legal/terms. Shopify reserves the right to
update and change the Terms of Service by posting updates and changes
to the Shopify website. You are advised to check the Terms of Service
from time to time for any updates or changes that may impact you.
</p>
</Scrollable>
</LegacyCard>
);
}Props
- children?React.ReactNode
Content to display in scrollable area.
- vertical?boolean
Scroll content vertically.
Defaults to true.
- horizontal?boolean
Scroll content horizontally.
Defaults to true.
- shadow?boolean
Add a shadow when content is scrollable.
- hint?boolean
Slightly hints content upon mounting when scrollable.
- focusable?boolean
Adds a tabIndex to scrollable when children are not focusable.
- scrollbarWidth?"none" | "thin" | "auto"
Browser determined scrollbar width.
Defaults to 'thin'.
- scrollbarGutter?"stable" | "stable both-edges"
Adds space to one or both sides to prevent content shift when scrolling is necessary.
- onScrolledToBottom?() => void
Called when scrolled to the bottom of the scroll area.
Best practices
Scrollable containers should:
- Be used when it’s helpful to provide an extra visual cue to let merchants know that content exists below or above the fold
- Only be used for length text such as terms of service or other legal disclaimers and never for instructional or action-oriented text
Content guidelines
Scrollable containers are cards with scrolling functionality, and should follow the content guidelines for cards.
Related components
- To put long sections of information under a block that merchants can expand or collapse, use the collapsible component