Languages
[Edit]
EN

React - how to add scrollbar to the component

6 points
Created by:
maryam
791

In this article we would like to show you how to add scrollbar to the component in React.

Below examples describe three situations:

  1. When we want to add scrollbar in any direction the content overflows our component's block,
  2. When the content overflows only at the top and bottom edges (horizontal scrollbar),
  3. When the content overflows only at the left and right edges (vertical scrollbar).

Check below examples

1. Scrollbar in both directions

In this solution we set overflow value to 'scroll' which allows us to scroll both in X and Y axis.

Runnable example:

// ONLINE-RUNNER:browser;

//Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

const myComponent = {
    width: '100px',
    height: '100px',
    overflow: 'scroll'
};

const MyComponent = () => {
    return (
        <div style={{ height: '200px' }}>
            <div style={myComponent}>
                <ul>
                    <li>List_item_1</li>
                    <li>List_item_2</li>
                    <li>List_item_3</li>
                    <li>List_item_4</li>
                    <li>List_item_5</li>
                </ul>
            </div>
        </div>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<MyComponent />, root );

2. Horizontal scrollbar (overflowX)

In this solution we set overflowX: value to 'scroll' which allows us to scroll along the X axis and overflowY: value to 'hidden' which hides vertical scrollbar.

Runnable example:

// ONLINE-RUNNER:browser;

//Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

const myComponent = {
    width: '100px',
    height: '100px',
    overflowX: 'scroll',
    overflowY: 'hidden'
};

const MyComponent = () => {
    return (
        <div style={{ height: '200px' }}>
            <div style={myComponent}>
                <ul>
                    <li>List_item_1</li>
                    <li>List_item_2</li>
                    <li>List_item_3</li>
                    <li>List_item_4</li>
                    <li>List_item_5</li>
                </ul>
            </div>
        </div>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<MyComponent />, root );

Note:
When you don't specify overflowY: value, it will be initialized with 'auto'. (Read more here)

3. Vertical scrollbar (overflowY)

In this solution we set overflowY: value to 'scroll' which allows us to scroll along the Y axis and overflowX: value to 'hidden' which hides horizontal scrollbar.

// ONLINE-RUNNER:browser;

//Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

const myComponent = {
    width: '100px',
    height: '100px',
    overflowX: 'hidden',
    overflowY: 'scroll'
};

const MyComponent = () => {
    return (
        <div style={{ height: '200px' }}>
            <div style={myComponent}>
                <ul>
                    <li>List_item_1</li>
                    <li>List_item_2</li>
                    <li>List_item_3</li>
                    <li>List_item_4</li>
                    <li>List_item_5</li>
                </ul>
            </div>
        </div>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<MyComponent />, root );

Note:
When you don't specify overflowX: value, it will be initialized with 'auto'. (Read more here)

Alternative titles

  1. React - overflow scroll
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

ReactJS

React - add scrollbar to the component
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

â€ïžđŸ’» 🙂

Join