---
title: Migrate ScrollView to the Polaris scroll box component
description: >-
  Learn how to migrate the ScrollView component to Polaris web components in
  checkout and customer account UI extensions.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/scroll-view
  md: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/scroll-view.md
---

# Migrate ScrollView to the Polaris scroll box component

The Polaris scroll box component creates scrollable containers for long-form content. It replaces the previous [`ScrollView`](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/ui-components/layout-and-structure/scrollview) component and is available as [`<s-scroll-box>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/scroll-box) in API versions 2025-10 and newer.

***

## Updated properties

The following properties are different in the Polaris scroll box component.

### direction

The previous `ScrollView` `direction` prop is now controlled through [`overflow`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/scroll-box#properties-propertydetail-overflow).

| Previous value | New value | Migration notes |
| - | - | - |
| `'block'` | `overflow="auto hidden"` | Scrolls in block direction only. Using `overflow="auto"` enables both axes. |
| `'inline'` | `overflow="hidden auto"` | Scrolls in inline direction only. |

## Migrating direction to overflow

##### Latest (Preact)

```tsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-scroll-box overflow="auto hidden" maxBlockSize="300px">
      <s-text>Long scrollable content...</s-text>
      <s-text>More content...</s-text>
      <s-text>Even more content...</s-text>
    </s-scroll-box>
  );
}
```

##### Pre-Polaris (2025-07)

```tsx
import {
  reactExtension,
  ScrollView,
  Text,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <ScrollView direction="block" maxBlockSize={300}>
      <Text>Long scrollable content...</Text>
      <Text>More content...</Text>
      <Text>Even more content...</Text>
    </ScrollView>
  );
}
```

## Migrating inline scrolling

##### Latest (Preact)

```tsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-scroll-box overflow="hidden auto">
      <s-stack direction="inline">
        <s-box minInlineSize="700px" border="base">
          <s-text>Box 1</s-text>
        </s-box>
        <s-box minInlineSize="700px" border="base">
          <s-text>Box 2</s-text>
        </s-box>
        <s-box minInlineSize="700px" border="base">
          <s-text>Box 3</s-text>
        </s-box>
      </s-stack>
    </s-scroll-box>
  );
}
```

##### Pre-Polaris (2025-07)

```tsx
import {
  reactExtension,
  InlineStack,
  ScrollView,
  View,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <ScrollView direction="inline">
      <InlineStack>
        <View border="base" minInlineSize={700}>
          Box 1
        </View>
        <View border="base" minInlineSize={700}>
          Box 2
        </View>
        <View border="base" minInlineSize={700}>
          Box 3
        </View>
      </InlineStack>
    </ScrollView>
  );
}
```

**Responsive values:**

If you used `Style.default().when()` to make this property responsive, container queries replace the `Style` helper. Wrap your content in `<s-query-container>` and use `@container` syntax in the property value. Learn more in [Migrate StyleHelper to container queries](https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/style-helper).

***

## Removed properties

The following properties aren't supported:

* `hint` — no longer supported. The scroll box provides a shadow indicator by default.
* `scrollTo` — no longer supported.
* `onScroll` — no longer supported. DOM event listeners aren't available.
* `onScrolledToEdge` — no longer supported. DOM event listeners aren't available.

***

## New properties

The Polaris scroll box component introduces the following new properties:

| New prop | Type | Description |
| - | - | - |
| [`accessibilityRole`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/scroll-box#properties-propertydetail-accessibilityrole) | `'main'` \| `'header'` \| `'footer'` \| `'section'` \| `'aside'` \| `'navigation'` \| `'ordered-list'` \| `'list-item'` \| `'unordered-list'` \| `'separator'` \| `'status'` \| `'alert'` \| `'listbox'` \| `'generic'` \| `'presentation'` \| `'none'` | Semantic role for the scrollable container. Defaults to `'generic'`. |
| [`accessibilityVisibility`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/scroll-box#properties-propertydetail-accessibilityvisibility) | `'visible'` \| `'hidden'` \| `'exclusive'` | Controls visibility for assistive technologies. |

***