# Scroll

## Examples


### Controlled

The controlled method must be used to set the Scroll position.

```typescript
import React, { Component } from 'react';

import { times } from 'lodash';

import Button from '@splunk/react-ui/Button';
import Layout from '@splunk/react-ui/Layout';
import P from '@splunk/react-ui/Paragraph';
import Scroll from '@splunk/react-ui/Scroll';


class Basic extends Component<object, { top?: number }> {
    private scrollEl: Element | null = null;

    constructor(props: object) {
        super(props);
        this.state = {};
    }

    handleClickDown = () => {
        if (this.scrollEl) {
            this.setState({
                top: this.scrollEl.scrollTop + 200,
            });
        }
    };

    handleClickUp = () => {
        if (this.scrollEl) {
            this.setState({
                top: this.scrollEl.scrollTop - 200,
            });
        }
    };

    handleScrollComplete = () => {
        this.setState({
            top: undefined,
        });
    };

    handleScrollElMount = (el: Element | null) => {
        this.scrollEl = el;
    };

    render() {
        const styles = {
            border: '1px solid #ccc',
            height: '400px',
            width: '400px',
            marginTop: '20px',
        };

        return (
            <div>
                <Layout>
                    <Button label="Scroll down" onClick={this.handleClickDown} />
                    <Button label="Scroll up" onClick={this.handleClickUp} />
                </Layout>

                <Scroll
                    elementRef={this.handleScrollElMount}
                    style={styles}
                    top={this.state.top}
                    onScrollComplete={this.handleScrollComplete}
                    tagName="article"
                >
                    {times(15, (i) => (
                        <P key={i}>
                            This is a scrollable paragraph. Add more content to see the scroll
                            effect.
                        </P>
                    ))}
                </Scroll>
            </div>
        );
    }
}

export default Basic;
```



### Uncontrolled with Scroll Propagation

The uncontrolled approach is useful for stopping propagation of the Scroll. Here, scrolling with the mouse wheel over the container does not scroll the window.

```typescript
import React from 'react';

import { times } from 'lodash';

import P from '@splunk/react-ui/Paragraph';
import Scroll from '@splunk/react-ui/Scroll';


function Uncontrolled() {
    const styles = {
        border: '1px solid #ccc',
        height: '400px',
        width: '400px',
    };

    return (
        <Scroll stopScrollPropagation style={styles}>
            {times(15, (i) => (
                <P key={i}>
                    This is a scrollable paragraph. Add more content to see the scroll effect.
                </P>
            ))}
        </Scroll>
    );
}

export default Uncontrolled;
```




## API


### Scroll API

#### Props

| Name | Type | Required | Default | Description |
|------|------|------|------|------|
| children | React.ReactNode | no |  |  |
| elementRef | React.Ref<Element> | no |  | A React ref which is set to the DOM element when the component mounts and null when it unmounts. |
| left | number | no |  | Set this to animate to a specific scroll position. Remove this property onScrollComplete to restore control to the user. |
| onScroll | React.UIEventHandler<Element> | no |  | A callback for when the scroll position changes. |
| onScrollComplete | () => void | no |  | A callback for when an animated update completes. Ensure the animate prop is set back to false and restore control to the user. |
| stopScrollPropagation | boolean \| 'window' | no |  | Prevent mouseWheel events from scrolling the page or other containers. 'window' only stops the window from scrolling by removing the scroll bars, which has better performance but can affect layout. |
| tagName | unknown | no | 'div' |  |
| top | number | no |  | Set this to animate to a specific scroll position. Remove this property onScrollComplete to restore control to the user. |