ScrollView

ScrollView allows content to be scrollable.

Demo

Usage

Import the ScrollView component.

import { Image, ScrollView } from '@aws-amplify/ui-react';

export const DefaultScrollViewExample = () => {
  return (
    <ScrollView height="300px" width="400px" maxWidth="100%">
      <Image
        width="800px"
        maxWidth="800px"
        src="/amplify-logo.svg"
        alt="Amplify-logo"
      />
    </ScrollView>
  );
};

Horizontal overflow

For horizontal scrollbars, set the width of the ScrollView smaller than the width of the content.

The value of Pi is 3.1415926535897932384626433832795029. The value of e is 2.7182818284590452353602874713526625.

import { ScrollView } from '@aws-amplify/ui-react';

export const ScrollViewHorizontalExample = () => {
  return (
    <ScrollView width="200px" className="horizontal-example">
      The value of Pi is 3.1415926535897932384626433832795029. The value of e is
      2.7182818284590452353602874713526625.
    </ScrollView>
  );
};

Vertical overflow

For vertical scrollbars, set the height of the ScrollView smaller than the height of the content.

Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.

import { ScrollView } from '@aws-amplify/ui-react';

export const ScrollViewVerticalExample = () => {
  return (
    <ScrollView height="100px" width="200px">
      {`Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's
      Inn Hall. Implacable November weather. As much mud in the streets as if
      the waters had but newly retired from the face of the earth.`}
    </ScrollView>
  );
};

Autoscroll

You can enable the autoscroll feature by setting the autoScroll prop to either: 'smooth', 'instant', or 'auto'. Enabling the autoscroll feature will automatically scroll to the end of the ScrollView when its children changes. This can be useful if you are building a chat UI for example.

import * as React from 'react';
import {
  Button,
  Card,
  Flex,
  Image,
  ScrollView,
  Text,
} from '@aws-amplify/ui-react';

export const AutoScrollExample = () => {
  const [items, setItems] = React.useState([1, 2]);

  return (
    <Flex direction="column" alignItems="flex-start">
      <Flex direction="row">
        <Card variation="outlined">
          <ScrollView autoScroll="smooth" height="200px" width="200px">
            <Flex direction="column">
              {items.map((item, index) => (
                <Card key={index} variation="outlined">
                  <Text fontWeight="bold">{index}</Text>
                </Card>
              ))}
            </Flex>
          </ScrollView>
        </Card>
        <Card variation="outlined">
          <ScrollView autoScroll="smooth" height="200px" width="200px">
            <Flex direction="row" wrap="nowrap">
              {items.map((item, index) => (
                <Card key={index} variation="outlined">
                  <Text fontWeight="bold" width="100px">
                    {index}
                  </Text>
                </Card>
              ))}
            </Flex>
          </ScrollView>
        </Card>
      </Flex>
      <Button
        onClick={() => {
          setItems([...items, 1]);
        }}
      >
        Add item
      </Button>
    </Flex>
  );
};

Accessibility

If your scrollable content does not have any focusable elements, there are additional HTML attributes you can add to your ScrollView to make it more friendly to keyboard users.

To create accessible, scrollable regions, you can add a tabIndex to the ScrollView to make it keyboard navigable. Additionally, you can add an accessible label to the ScrollView to give extra context about the scrollable content to screen reader users. In the following example, we've used an aria-label.

This scrollview is keyboard focusable and has an accessible label.

import { ScrollView, Card } from '@aws-amplify/ui-react';

export const AccessibleScrollViewExample = () => {
  return (
    <ScrollView
      width="400px"
      maxWidth="100%"
      tabIndex={0}
      aria-label="Accessible Scrollview"
    >
      <Card width="600px" backgroundColor="neutral.10">
        This scrollview is keyboard focusable and has an accessible label.
      </Card>
    </ScrollView>
  );
};

CSS Styling

Target classes

Class	Description
`amplify-scrollview`	Top level element that wraps the ScrollView primitive

No variables available for this component

Local styling

To override styling on a specific View, you can use a class selector or style props.

Using a class selector:

/* styles.css */
.my-scrollview {
  height: 100px;
  width: 200px;
  padding: var(--amplify-space-medium);
  background-color: var(--amplify-colors-blue-10);
}

import { ScrollView } from '@aws-amplify/ui-react';

import './styles.css';

<ScrollView className="my-scrollview">
  {
    "Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth."
  }
</ScrollView>

Using style props:

import { ScrollView } from '@aws-amplify/ui-react';

export const ScrollViewStylePropsExample = () => {
  return (
    <ScrollView
      height="100px"
      width="200px"
      padding="medium"
      backgroundColor="blue.10"
    >
      {
        "Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth."
      }
    </ScrollView>
  );
};