import { Badge } from 'terra-scroll/package.json?dev-site-package';

import ScrollVertical from './example/ScrollVertical?dev-site-example';
import ScrollHorizontal from './example/ScrollHorizontal?dev-site-example';

import ScrollPropsTable from 'terra-scroll/lib/Scroll?dev-site-props-table';

<Badge />

# Terra Scroll

The terra-scroll is a content view that hides data accessible with scrolling and provides a refCallback. The expectation is that any consumer needing to provide a scrollable area within their implementation should be using this component, or one of our other terra components that implements Scroll.

Scroll provides a menthod to access the node managing scrolling, so values such as scrollTop can be easily set, as well as the correct prefixes to consistently sytle scrolling across supported browsers.

The terra-scroll expands to fill it's parent container, so parent nodes are expected to have an explicit height set.

## Getting Started

- Install with [npmjs](https://www.npmjs.com):
  - `npm install terra-scroll`

<!-- AUTO-GENERATED-CONTENT:START Peer Dependencies -->
## Peer Dependencies

This component requires the following peer dependencies be installed in your app for the component to properly function.

| Peer Dependency | Version |
|-|-|
| react | ^16.8.5 |
| react-dom | ^16.8.5 |

<!-- AUTO-GENERATED-CONTENT:END -->

## Usage
```js
import Scroll from 'terra-scroll';
```

## Component Features
* [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
* [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
* [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)

## Examples
<ScrollVertical title="Vertical Scroll" />
<ScrollHorizontal title="Horizontal Scroll"/>

## Scroll Props
<ScrollPropsTable />