Skip to contentShopify logoPolaris

Scrollable

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.

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 {Card, Scrollable} from '@shopify/polaris';
import React from 'react';

function ScrollableExample() {
  return (
    <Card 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>
    </Card>
  );
}

Props

Want to help make this feature better? Please share your feedback.

interface ScrollableProps
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.

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.